角度应用程序中的拖放不起作用答案

【问题标题】：Drag&Drop in angular application doesn't work角度应用程序中的拖放不起作用
【发布时间】：2017-04-13 13:31:11
【问题描述】：

我尝试在我的 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));
}

以及依赖关系（以防万一）

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

【问题讨论】：

标签： javascript html angularjs drag-and-drop

【解决方案1】：

您正在使用 JS 事件（ondrop、ondragover），而您应该使用指令以角度方式实现它。下面是一些例子：

Angular Drag and Drop
Drag & Drop with HTML5

【讨论】：