javascript - 拖放不起作用，不允许放在 div 上

Question

我正在尝试使用拖放创建应用程序。当我尝试将元素放在名为“serviciosARealizar”的 div 上时，它不允许。请帮忙

HTML

   <div id='aceite' draggable="true" ondragstart="arrastrar(event)"><img src='img/aceite.jpg' /></div>
   <div id='luces' draggable="true" ondragstart="arrastrar(event)"><img src='img/lamp.png' /></div>
   <div id='serviciosARealizar' ondrop='soltar(event)' ondragover='permiteSoltar(event)'></div>

JavaScript

   <script>

    function permiteSoltar(ev){
        ev.preventDefault();
    }

    function soltar(ev){
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
    function arrastrar(ev){
        ev.dataTransfer.setData("Text",ev.target.id);
    }

  </script>

Answer 1

您可能正在寻找这个；

function dragStart(ev) {
    draggSrcID = ev.target.id;
    dragSrcEl = ev.target;
    ev.dataTransfer.effectAllowed = 'move';
    ev.dataTransfer.setData('text/html', ev.target.outerHTML);
}

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

function drop(ev) {
    ev.target.appendChild(document.getElementById(draggSrcID));
    ev.preventDefault();
} 

即使函数名称不同，它仍然可以正常工作。只需确保在图像上(这只适用于图像)添加 draggable="true"onstartdrag="drop(ev)"。还要确保图像有 id，任何 id。