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。

Answer 2

你的问题是你的图片没有id只有你的div。拖动时，不要拖动拖动图像的div。从div中取出ID并将它们放入imgs中，它可以完美地运行。我通过使用以下标签尝试了它。（我还假设您的CSS文件在servicosARealizar div上有维度，否则您需要指定大小）

<div draggable="true" ondragstart="arrastrar(event)"><img id='aceite' src='img/aceite.jpg' /></div>
   <div  draggable="true" ondragstart="arrastrar(event)"><img id='luces' src='img/lamp.png' /></div>
   <div id='serviciosARealizar' ondrop='soltar(event)' style="width:500px;height:500px;background-color:red" ondragover='permiteSoltar(event)'></div>

拖放不工作，不允许放在div上

2 个答案: