使用 HTML5 拖放的可拖动项目的外观答案

【问题标题】：Appearance of draggable items with HTML5 drag and drop使用 HTML5 拖放的可拖动项目的外观
【发布时间】：2017-03-03 01:33:30
【问题描述】：

我的代码如下：

<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 保持在其位置，并且正在移动一个半透明的克隆。我怎样才能做到在其原始位置保持任何东西，并且在四处移动以完全可见时？换句话说，要按原样移动元素而不被克隆？

【问题讨论】：

标签： javascript html

【解决方案1】：

实现此目的的一种方法是监听拖动事件ondrag 并为监听器内的元素设置动画以随鼠标移动。

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

【讨论】：

【解决方案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>

【讨论】：