HTML5のドラッグでドラッグ可能なアイテムの外観と

Question

私のコードをドロップするには、次のとおりです。私はドラッグ可能なdiv要素の1ドラッグすると

<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がその位置に留まり、半透明のクローンを移動させています。私は元の位置に何も残さないように、そしてまっすぐに目に見えるように移動するときに、どうすれば達成できますか？言い換えれば、要素を正確に複製しないまま移動させることですか？

Answer 1

一つの方法を試すために始めることができますプロパティ「.parentNode」すると

を削除しましたドラッグイベントondragを聞き、マウスとともに移動するためにリスナー内の要素をアニメートすることです。

このアニメーションは、要素の最初のx座標とy座標と、ドラッグされた距離と方向に基づいている必要があります。

Answer 2

あなたは、ドラッグ＆ドロップしたいすべての要素に "id"を与える必要があります。

はあなたに私は新しいDIV「ID」を、追加の例を与えるために、私はあなたがこれを達成するために

<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>