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

实现此目的的一种方法是收听拖动事件.show_question_fields { display: inline-block; font: inherit; text-align: center; border-color: black; border-style: solid solid solid solid; border-radius: 0.4em 0.4em 0.4em 0.4em; border-width: 0.15em; font-size: 1.8vw; vertical-align: top; }并为侦听器内的元素设置动画以与鼠标一起移动。

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

Answer 2

你必须提供一个＆＃34; id＆＃34;到你想要拖放的每个元素。

举个例子，我添加了＆＃34; id＆＃34;，一个新的div，我删除了属性＆＃34; .parentNode＆＃34;

然后你就可以开始试验了

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

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

2 个答案: