通過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”。

舉一個例子，我添加了“ 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>