Question

使用this example from W3Schools我想将一个小部件拖到另一个小部件上（它们是兄弟小部件）

我将draggable属性添加到我想要像这样拖动的元素

<div draggable="true" id="textbox" >

但是在接收小部件上如何在基于模板的小部件中定义函数allowDrop？另外，我如何确定正在拖动哪个小部件？

Widget的HTML我想放到

<div ondragover="allowDrop(event)"   >
    <div id="canvas"   class="grid container">
        <div   style="color:red"  data-dojo-attach-point="canvasNode"></div>
    </div>
</div>

在我的小部件javascript中，我像这样定义了allowDrop

return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {

    templateString: template,

    allowDrop: function (ev) {
        alert("test");
        ev.preventDefault();
    },
    ....
  }

鼠标进入窗口小部件区域并尝试触发allowDrop事件时出现的错误如下

未捕获的ReferenceError：未定义allowDrop

修改

如果我将这些函数包含在index.html的脚本标记内，就像这个

一样，一切正常

<script>
    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    }

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        //ev.target.appendChild(document.getElementById(data));
    }
</script>

Answer 1

使用data-dojo-attach-event绑定事件并调用窗口小部件范围内的函数。

<div data-dojo-attach-event= "ondragover:allowDrop(event)">
    <div id="canvas"   class="grid container">
        <div style="color:red"  data-dojo-attach-point="canvasNode"></div>
    </div>
</div>

尝试使用事件名称的驼峰套管，如果这不起作用。

Answer 2

从HTML中删除事件属性，而不是在启动或后创建时使用dojo / on以编程方式附加此类事件

    startup: function () {
        this.inherited(arguments);

        var that = this;

        on(dom.byId("canvas"), "dragover", function (event) {
            that.allowDrop(event);

        });

    }

如何在窗口小部件上设置HTML5事件？

2 个答案: