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

Question

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

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

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

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

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 事件时遇到的错误如下

Uncaught ReferenceError: allowDrop is not defined

编辑

如果我像这样在 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 事件？

How to set HTML5 events on a widget?

html

javascript

dojo