拖放（交换，删除）JavaScript

我想创建一个应用程序来练习和理解拖放。拖放（交换，删除）JavaScript

我的应用程序有一个拖放区域，拖动项目的工具栏和删除项目的拖放区域。

无法做的是在放置区中的两个项目之间交换位置。当我尝试通过拖动一个来改变位置时，另一个拖放会在前一个元素上执行。

这是我的申请code pen link。

<fieldset> 
 
    <legend>Drop Zone</legend> 
 
    <div id="dz" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 
</fieldset> 
 
</form> 
 
<div class="card text-xs-center"> 
 
    <div class="card-block"> 
 
    <div id="textbox"> 
 
     <div id="dti1" class="form-group" draggable="true" ondragstart="drag(event)"> 
 
     <label for="ti1">Text Input</label> 
 
     <input type="text" class="form-control" id="ti1" placeholder="text"> 
 
     </div> 
 
     <div id="dti2" class="form-group" draggable="true" ondragstart="drag(event)"> 
 
     <label for="ti2">Password</label> 
 
     <input type="password" class="form-control" id="ti2" placeholder="Password"> 
 
     </div> 
 
     <div id="dti3" class="form-group" draggable="true" ondragstart="drag(event)"> 
 
     <label for="ti3">Example textarea</label> 
 
     <textarea class="form-control" id="ti3" rows="3"></textarea> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="delete" ondragover="allowDrop(event)" ondrop="del(event)">Drop here to delete </div> 
 
</div>

这一形象会给你我在说什么

来源

2016-12-29 Mill3r

不允许在放置区本身重复放置功能，因为这允许重复表单元素条目，这是造成问题的原因。 –

我真的不明白你的解决方案。如果我不允许放置区中的放置功能，那么它根本不起作用。 – Mill3r

允许放置功能，但不能放在已经在该区域的物品上。 –

为了防止其他元素内下降的一个想法，你可以添加的检查id：

function allowDrop(e) { 
    'use strict'; 
    if (e.target.id === 'dz') { 
     e.preventDefault(); 
    } 
}

这将允许仅丢弃到主容器

来源

2016-12-29 09:24:39

谢谢..这有帮助。 – Mill3r

不客气，实施交换并不是那么容易，尝试自己，并在这里链接问题，如果你有它们。看看[这个库]（http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple。）另外，考虑接受答案，如果它回答你的问题 –

拖放（交换，删除）JavaScript

回答

相关问题