Question

我正在尝试进行拖放操作，我有一个dinamically生成的表和一个带垃圾桶的div，因此行具有“draggable”属性，但我无法添加“drop”元素到我的垃圾桶。

以下是我正在做的事情：

<div id="tabla" style="margin:30px auto; display:none;">
    <div id="bin" ondrop="drop(event)">
        <img src="icono.png" style="width:100px; margin-left:500px;display:inline;"/><p>
    </div>
    <table id="grid" class="grid">
        <tr>
        <th>Id</th>
        <th>Nombre</th>
        <th>Correo</th>
        <th>Password</th>               
        </tr>
    </table>
</div>

我的JS（片段）：

window.onload = function() {
    if(localStorage==undefined) {
        alert("Éste navegador no soporta Local Storage");
    } else {
        generarTabla();
        if (localStorage.length > 0) {
            document.getElementById('tabla').style.display = 'block';
        var bote = document.getElementById("bin");
        bote.addEventListener("dragleave",handlerLeave,false);
        bote.addEventListener("dragover",handlerOver,false);
        bote.addEventListener("drop",drop,false);
        }
    }
}

function drop(e){
    if (e.stopPropagation) {
        e.stopPropagation(); // stops the browser from redirecting.
    }       
    alert("ola");
}

Answer 1

您需要启用目标元素上的删除。像这样在你的div中添加ondragover属性：

<div id="bin" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="icono.png" style="width:100px; margin-left:500px;display:inline;"/><p>
</div>

和allowDrop函数，例如：

function allowDrop(e) {
    e.preventDefault();
}

将drop事件添加到div（No Jquery）

1 个答案: