外觀與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>