Question

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

2016-05-25

85

javascript html dojo

使用来自 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

从 HTML 中删除事件属性，而是在启动或 postcreate 中使用 dojo/on 以编程方式附加事件，如下所示

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

        var that = this;

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

        });

    }

Answer 2

使用 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>

如果不起作用，请尝试使用事件名称的驼峰式大小写。