0

我正在尝试使用拖放创建应用程序。当我试图将元素放在名为“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>
4

2 回答 2

3

您可能正在寻找这个；

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。

于 2016-01-12T13:49:02.103 回答
0

您的问题是您的图像没有 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>
于 2013-04-26T13:34:03.703 回答