如何在小部件上設置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事件？

回答

相關問題