道场拖放（DND）不工作

Question

我有道场树和可以添加到树中的项目列表。想使用 dojo dnd（拖放），以便可以将列表中的项目拖到树上以添加它们。

这是我正在尝试做的一个示例： jsfiddle example

当您将鼠标放在未分配的列表项上并将其拖到树上时，似乎什么都没有发生，但是如果您查看 Web 浏览器控制台，您会发现它总是在 dojo 的 @987654324 中抱怨 TypeError: a is undefined @模块。

我正在尝试做类似于此示例Dojo drag-n-drop example 的事情。在本例中，从items 列表中抓取一个项目并将其拖到右侧的树（集合树）上。

我正在使用 dojo 1.10.4，并且对使用树和拖放（dojo dnd）也是新手。为了能够从列表中拖放到树上，我在这里缺少什么？？

Answer 1

我使用屏幕左侧的 Dojo Tree 和右侧的列表使用 Dragula (https://github.com/bevacqua/dragula)。这很简单，而且很有效。

这里是 Dragula 的列表对象示例。

this.dnd = dragula([this.list], {
       isContainer: function (el) {
         return el.classList.contains('dijitTreeRow');
       }
     });
     this.dnd.on('shadow', function (el, container, source) {         // the event when yoi drag something tipo hover
     //   console.log(el, container);
       var oldContainer;                                         // change color of the drop item
       oldContainer = query('.dndHover')[0];
       if (oldContainer) {                                       
         domClass.remove(oldContainer, 'dndHover');
       }
       if (container === source) {                               // if drag and drop on the list do nothing
         return;
       }
       domClass.add(container, 'dndHover');                  // highlight current node
     });



     this.dnd.on('drop', function (el, container, source) {           // drop event
        var oldContainer;                                         // remove highlight
        oldContainer = query('.dndHover')[0];
        if (oldContainer) {
           domClass.remove(oldContainer, 'dndHover');
        }
        if (container !== source) {
           // var widget = registry.getEnclosingWidget(el);
           var target = registry.getEnclosingWidget(container);
           // console.log(el, target);

           // target = TREE NODE
           // make your action (query, etc..)

        }
     }.bind(this));

CSS：

.dndHover{
   background-color: #52D017 !important;
}

.dijitTreeRow .dragdiv {
   display: none;
}