javascript - 拖放(交换、删除)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();
    }
}

这将只允许放置到主容器