[英]Drag&Drop in angular application doesn't work
I try to run a drag & drop system on my Angular application, the drag and drop works on an html file with a live-server, but once in my Angular application I can not drag and drop... If you have an idea... Thanks :) 我尝试在Angular应用程序上运行拖放系统,该拖放操作可在具有实时服务器的html文件上运行,但是一旦在Angular应用程序中,我将无法拖放...如果您有想法。 .. 谢谢 :)
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="https://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
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));
}
And the dependencies (in case) 和依赖关系(以防万一)
"dependencies": {
"angular": "^1.6.1",
"angular-ui-router": "^0.3.2",
"body-parser": "^1.15.2",
"cors": "^2.8.1",
"express": "^4.13.4",
"method-override": "^2.3.6",
"mongoose": "^4.6.5",
"morgan": "^1.7.0",
"toastr": "^2.1.2"
You're using JS events ( ondrop
, ondragover
) whereas you should implement this the angular way using directives. 您使用的是JS事件(
ondrop
, ondragover
),而应该使用指令以角度方式实现这一点。 Here's some examples: 这里有一些例子:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.