Question

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

以下是我尝试做的一个例子： jsfiddle example

当您在未分配的列表项上鼠标按下并将其拖到树上时，似乎没有任何事情发生，但是如果您查看Web浏览器控制台，您会发现它始终在dojo中抱怨TypeError: a is undefined ＃39; s Memory.js模块。

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

我正在使用dojo 1.10.4以及使用树和drag-n-drop（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;
}

dojo拖放（DND）不起作用

1 个答案: