使用JavaScript通过拖放

我试着换DIV1和DIV2标签内的两个元素，但只有第一个替换功能交换的div的子元素正确执行的其他元素不换使用JavaScript通过拖放

的div

一方一次是越来越交换但是当我尝试在同一时间都掉它不发生，请帮我出 *

<head> 
    <style type="text/css"> 
     #div1 { 
      width:350px; 
      height:70px; 
      padding:10px; 
      border:1px solid #aaaaaa; 
     } 
     #div2 { 
      width:350px; 
      height:70px; 
      padding:10px; 
      border:1px solid #aaaaaa; 
     } 
    </style> 
    <script> 
     function allowDrop(ev) { 
      ev.preventDefault(); 
     } 

     function drag(ev) { 
      var child = ev.target; 
      var parents = child.parentNode; 
      ev.dataTransfer.setData("child1", child.id); 
      ev.dataTransfer.setData("parent1", parents.id); 
     } 

     function drop(ev) { 
      ev.preventDefault(); 
      var childid1 = ev.dataTransfer.getData("child1"); 
      var parentid1 = ev.dataTransfer.getData("parent1"); 
      var parent1 = document.getElementById(parentid1); 
      var c = ev.currentTarget.childNodes; 
      var childid2 = c[1].id; 
      parent1.replaceChild(c[1], document.getElementById(childid1)); 
      var parent2 = ev.currentTarget; 
      parent2.removeChild(c[1]); 
      parent2.appendChild(document.getElementById(childid1)); 
     } 
    </script> 
</head> 

<body> 
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> 
     <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> 
    </div> 
    <br> 
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> 
     <img id="drag2" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="236" height="49"> 
    </div> 
</body>

来源

2013-05-28 304696

我觉得你根本缺陷是，你不照顾的事实，当你做你的第一个replaceChild，您要插入的图像从其父删除，因此不再有与更换第二个图像。

我发现你的变量名称有点混乱，并以简单的方式重写了代码如下：

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

function drag (ev) { 
    ev.dataTransfer.setData ("src", ev.target.id); 
} 

function drop (ev) { 
    ev.preventDefault(); 
    var src = document.getElementById (ev.dataTransfer.getData ("src")); 
    var srcParent = src.parentNode; 
    var tgt = ev.currentTarget.firstElementChild; 

    ev.currentTarget.replaceChild (src, tgt); 
    srcParent.appendChild (tgt); 
}

您可以在jsFiddle

来源

2013-05-28 07:25:12 HBP

太感谢你了测试此代码:)它工作正常.i在使用替换子方法时出错了 – 304696

很高兴能有所帮助。 DOM操作可能会非常棘手。不要忘记验证答案。 – HBP

使用JavaScript通过拖放

回答

相关问题