外观与HTML5拖动可拖动的项目的拖放

Question

我的代码如下：

<style> 
    .box { 
     border:1px solid black; 
     margin:40px; 
     padding:20px; 
    } 
    .dragitem { 
     border:1px solid red; 
     padding:10px; 
     margin:10px; 
    } 
</style> 

<div class="box" ondragover="allowDrop(event)" ondrop="drop(event)"> 

    <div class="dragitem" draggable="true" ondragstart="drag(event)">one</div> 
    <div class="dragitem" draggable="true" ondragstart="drag(event)">two</div> 
    <div class="dragitem" draggable="true" ondragstart="drag(event)">three</div> 

</div> 


<script> 
function drag(e) { 
    e.dataTransfer.setData("Text",e.target.id); 
} 
function allowDrop(e) { 
    e.preventDefault(); 
} 
function drop(e){ 
    e.preventDefault(); 
    var data=e.dataTransfer.getData("Text"); 
    e.target.parentNode.appendChild(document.getElementById(data)); 
} 
</script> 

当我拖动可拖动的div之一，该div保持在其位置和半透明的克隆被移动。我该如何实现在原来的位置上保持不动，并且四处移动时可以看到完全可见的状态？换句话说，要移动元素而不是被克隆？

Answer 1

的一种方式，将听取拖动事件ondrag，并使侦听器内的元素与鼠标一起移动。

此动画需要基于元素的初始x和y坐标以及它被拖动的距离和方向。

Answer 2

您必须为要拖放的每个元素提供一个“id”。

为了让你我添加了“身份证”，一个新的div一个例子，我删除了财产“.parentNode”

然后你就可以开始进行实验，以实现这一

<style> 
    .box { 
     border:1px solid black; 
     margin:40px; 
     padding:20px; 
     height: 200px; 
    } 
    .dragitem { 
     border:1px solid red; 
     padding:10px; 
     margin:10px; 
    } 
</style> 
<div id="div11" class="box" ondragover="allowDrop(event)" ondrop="drop(event)"> 

    <div id="div1" class="dragitem" draggable="true" ondragstart="drag(event)">one</div> 
    <div id="div2" class="dragitem" draggable="true" ondragstart="drag(event)">two</div> 
    <div id="div3" class="dragitem" draggable="true" ondragstart="drag(event)">three</div> 

</div> 

<div id="div12" class="box" ondragover="allowDrop(event)" ondrop="drop(event)"> 
</div> 

<script> 
function drag(e) { 
    e.dataTransfer.setData("Text",e.target.id); 
} 
function allowDrop(e) { 
    e.preventDefault(); 
} 
function drop(e){ 
    e.preventDefault(); 
    var data=e.dataTransfer.getData("Text"); 
    e.target.appendChild(document.getElementById(data)); 
} 
</script>