dojo 中的 Drop 事件不适用于 dojo/on答案

【问题标题】：Drop event in dojo not not working with dojo/ondojo 中的 Drop 事件不适用于 dojo/on
【发布时间】：2017-10-22 19:31:47
【问题描述】：

我正在尝试使用 dojo 创建一个拖放列表。拖放工作正常，但是当我在触发 DndDrop、DragStart 和使用 dojo/query 和 dojo 的拖放相关的类似事件后尝试编写任何功能时/on...event 未处理。Again..click 事件为同一个 NodeList 工作正常。请指出我的错误。

<!DOCTYPE html>
<html>
<head>
    <title>clac</title>
    <link rel="stylesheet" type="text/css" href="calcdojo.css">
</head>
<body>
    <ul>
        <li id="operand1" class="container dropArea"></li>
        <li id="operator1" class=" container dropArea"></li>
        <li id="operand2" class=" container dropArea"></li>
        <li id="result"></li>
    </ul>   

    <ul id="sourcelist" class="container"> 
    </ul>

        <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojo/dojo.js"></script>
        <script type="text/javascript">
            require(["dojo/dom-style","dojo/dom-construct","dojo/dnd/Source","dojo/dnd/Source","dojo/query","dojo/on","dojo/domReady!"],function(domStyle,domConstruct,Source,Source,query,on){
                var sourcelist = new Source('sourcelist',{accept:[""]});
                sourcelist.copyOnly = true;
                sourcelist.insertNodes(false,[
                {data: "1",type:["operand"]},
                {data: "2",type:["operand"]},
                {data: "3",type:["operand"]},
                {data: "+",type:["operator"]}]);

                var operand1 = new Source('operand1',{accept:["operand"]});
                var operand2 = new Source('operand2',{accept:["operand"]});
                var operator1 = new Source('operator1',{accept:["operator"]});

                var dropArea = query(".dropArea");
                dropArea.on("DndDrop",function(event){
                  event.preventDefault();
                  console.log("dropped");
                });

            });
        </script>
</body>
</html>

（我这里需要显示“dropped”）

【问题讨论】：

有错误可以分享吗？此外，您想显示“dropped”，但在此之前，您将停止事件，那么 console.log("dropped") 将如何执行？
我很抱歉这个错误...我现在已经编辑了代码。并且没有显示错误。

标签： javascript dojo

【解决方案1】：

解释是dropArea nodeList中的dom节点不存在“onDrop”事件。

在为操作数 1 目标执行所需操作（显示“已删除”）的修改源下方：

<!DOCTYPE html>
<html>
<head>
    <title>clac</title>
    <link rel="stylesheet" type="text/css" href="calcdojo.css">
</head>
<body>
    <ul id="targetList" class="container">
        <li id="operand1" class="container dropArea"></li>
        <li id="operator1" class=" container dropArea"></li>
        <li id="operand2" class=" container dropArea"></li>
        <li id="result"></li>
    </ul>   

    <ul id="sourcelist" class="container"> 
    </ul>

        <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojo/dojo.js"></script>
        <script type="text/javascript">
            require(["dojo/dom-style","dojo/dom-construct","dojo/dnd/Source","dojo/dnd/Target","dojo/query","dojo/on", "dojo/aspect", "dojo/domReady!"],function(domStyle,domConstruct,Source,Target,query,on, aspect){
                var sourcelist = new Source('sourcelist',{accept:[""]});
                sourcelist.copyOnly = true;
                sourcelist.insertNodes(false,[
                {data: "1",type:["operand"]},
                {data: "2",type:["operand"]},
                {data: "3",type:["operand"]},
                {data: "+",type:["operator"]}]);

                var operand1 = new Target('operand1',{accept:["operand"]});
                var operand2 = new Target('operand2',{accept:["operand"]});
                var operator1 = new Target('operator1',{accept:["operator"]});

                //var dropArea = query(".dropArea");
                //dropArea.on("DndDrop",function(event){
                //on(operand, "onDrop",function(){
                aspect.after(operand1, "onDrop",function(){
                   console.log("dropped");
                });

            });
        </script>
</body>
</html>

我尝试使用 dojo/on - 声明 on(operand, "onDrop",function(){我注释掉了 - 这不起作用。我认为这是因为虽然文档调用了 onDrop 一个 dojo/DnD Source 类的事件，但它实际上是该类的一个方法，因此使用了 target.after。有关 dojo/on 和 dojo/target 之间区别的讨论，请参阅 here。

您必须对其他目标重复此操作。

（我还将重复的“dojo/dnd/Source”/Source 需要参数关联更改为“dojo/dnd/Target”/Target）。

【讨论】：

感谢您的努力 @Jean-Claude Hujeux。 sourcelist.on("DndDrop",function(source,nodes,copy,target)); 现在对我来说很好。正如你所提到的，drop 操作对源而不是目标进行。如果你会很好可以为节点列表应用道场/方面...而不是单个节点
好！我在回答中混淆了“onDrop”和“DndDrop”，这是不正确的。真正发生的是 onMouseUp 事件发布了 Source.onDndDrop 订阅的 dojo 主题“dnd/drop”。