拖放（交换，删除）JavaScript

Question

我正在尝试创建一个练习和理解拖放的应用程序。

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

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

以下是我的应用程序的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>

这张图片会让你知道我在说什么

Answer 1

为防止其他元素内部丢失，您可以添加id：

的检查

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

这将只允许删除主容器