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

与this example from W3Schools工作，我想一个小窗口拖放到另一个工具（他们是兄弟小部件）如何在小部件上设置HTML5事件？

我添加了可拖动属性，我的元素，我想拖这样

<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

编辑

一切工作正常，如果我有这样的

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

来源

2016-05-25 erotavlas

从HTML中删除事件属性，而使用道场/在启动时或postcreate以编程方式连接事件这样

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

     var that = this; 

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

     }); 

    }

来源

2016-05-30 14:29:19 sjs

使用data-dojo-attach-event的index.html的script标签内的功能绑定的事件，并呼吁是在widget的范围功能。

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

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

来源

2016-05-26 04:01:13 Himanshu

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

回答

相关问题