HTML 拖放问题答案

【问题标题】：HTML drag and drop issueHTML 拖放问题
【发布时间】：2016-07-13 13:02:47
【问题描述】：

我正在尝试制作一个 html 表单元素，它使用户能够按顺序排列四件事。例如，我想问一个用户他们最喜欢的动物是什么，然后把它们整理好。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
    updateOrder(ev.target.id);

}

function updateOrder(id) {
  var w = document.getElementById(id);
  for (var i = 0; i < w.childNodes.length; i++) {
    var node = w.childNodes[i];
     document.getElementById('order-'+i).value=node.id;
  }
}
</script>
</head>
<body>

<div class="container">
  <h2>Vertical (basic) form</h2>
  <form role="form">
    <div class="form-group">
      <label for="order">Put in order:</label>
      <input type="hidden" name="order-1" id="order-0" value="">
      <input type="hidden" name="order-2" id="order-1" value="">
      <input type="hidden" name="order-3" id="order-2" value="">
      <input type="hidden" name="order-4" id="order-3" value="">
<div style="border: 1px dashed #ddd; padding: 0.5em; min-height: 2em; margin-bottom: 4px;" ondrop="drop(event)" ondragover="allowDrop(event)" id="drop-from" placeholder="Pak hier de opties">
<div draggable="true" ondragstart="drag(event)" style="float: left;" id="option-1" class="label label-default">Optie 1</div>
<div draggable="true" ondragstart="drag(event)" style="float: left;" id="option-2" class="label label-default">Optie 2</div>
<div draggable="true" ondragstart="drag(event)" style="float: left;" id="option-3" class="label label-default">Optie 3</div>
<div draggable="true" ondragstart="drag(event)" style="float: left;" id="option-4" class="label label-default">Optie 4</div>
</div>
<div class="form-control" ondrop="drop(event)" ondragover="allowDrop(event)" id="drop-form" placeholder="sleep ze in de juiste volgorde hier naartoe"></div>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

</body>
</html>

现在我的问题是，当我想重新排列已删除的元素时，尤其是当您在 #option 2 上删除例如 #option-1 时，我有意想不到的输出。不是在#option-2 之后移动#option-1，而是将#option-1 放在#option-2 中，隐藏的输入字段会得到奇怪的值。有人可以帮帮我吗？

【问题讨论】：

标签： javascript jquery html drag-and-drop

【解决方案1】：

您的代码存在一些问题。请检查它。

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

var dropFrom = document.getElementById('drop-from');
function drop(ev) {
  ev.preventDefault();

  var data = ev.dataTransfer.getData("text");
  if (ev.target === dropFrom) {
    ev.target.appendChild(document.getElementById(data));
  }
  else {
    ev.target.parentNode.insertBefore(document.getElementById(data), ev.target.nextSibling)  
  }
  updateOrder(ev.target.id);
}

function updateOrder(id) {
  var w = document.getElementById('drop-from');
  var children = w.getElementsByTagName('div');
  for (var i = 0; i < children.length; i++) {
    var node = children[i];
    document.getElementById('order-'+i).value=node.id;
  }
}

<form role="form">
  <div class="form-group">
    <label for="order">Choose your favorite animals and put it in order:</label>
    <input type="hidden" name="order-1" id="order-0" value="">
    <input type="hidden" name="order-2" id="order-1" value="">
    <input type="hidden" name="order-3" id="order-2" value="">
    <input type="hidden" name="order-4" id="order-3" value="">
    <div style="border: 1px dashed #ddd; padding: 0.5em; min-height: 2em; margin-bottom: 4px;" ondrop="drop(event)" ondragover="allowDrop(event)" id="drop-from" placeholder="Pak hier de opties">
      <div draggable="true" ondragstart="drag(event)" style="float: left;" id="option-1" class="label label-default">Horse</div>
      <div draggable="true" ondragstart="drag(event)" style="float: left;" id="option-2" class="label label-default">Dog</div>
      <div draggable="true" ondragstart="drag(event)" style="float: left;" id="option-3" class="label label-default">Cat</div>
      <div draggable="true" ondragstart="drag(event)" style="float: left;" id="option-4" class="label label-default">Cow</div>
    </div>
    <div class="form-control" ondrop="drop(event)" ondragover="allowDrop(event)" id="drop-form" placeholder="sleep ze in de juiste volgorde hier naartoe"></div>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

【讨论】：

拆分代码时出现问题。现在它是整个代码。它应该可以工作。
在#drop-form 上从#drop-from 中删除元素效果很好。从#drop-from 删除元素到elements in #drop-form 不起作用。我怎样才能让元素只放在 div 上而不放在 div 中的元素上？
如果我理解正确，你希望在任何情况下，拖动元素都将下降到容器元素（#drop-from）。我更新了我的答案。
感谢您的代码，我能够修复代码。我将 drop-form 更改为 drop-to s.t.它不那么令人困惑。然后在我的回答中，您可以看到代码按预期工作。非常感谢@Mosh Feu！

【解决方案2】：

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function dropOrder(ev) {
  ev.preventDefault();

  var data = ev.dataTransfer.getData("text");
  if (ev.target === document.getElementById('drop-from') || ev.target === document.getElementById('drop-to')) {
    ev.target.appendChild(document.getElementById(data));
  }
  else {
    ev.target.parentNode.insertBefore(document.getElementById(data), ev.target.nextSibling)  
  }
  updateOrder();
}

function updateOrder() {
  var w = document.getElementById('drop-to');
  var children = w.getElementsByTagName('div');
  for (var i = 0; i < children.length; i++) {
    var node = children[i];
    document.getElementById('order-'+i).value=node.id;
  }
}
</script>
</head>
<body>

<div class="container">
  <h2>Vertical (basic) form</h2>
  <form role="form">
    <div class="form-group">
      <label for="order">Put in order:</label>
      <input type="text" name="order-1" id="order-0" value="">
      <input type="text" name="order-2" id="order-1" value="">
      <input type="text" name="order-3" id="order-2" value="">
      <input type="text" name="order-4" id="order-3" value="">
<div style="border: 1px dashed #ddd; padding: 0.5em; min-height: 2em; margin-bottom: 4px;" ondrop="dropOrder(event)" ondragover="allowDrop(event)" id="drop-from" placeholder="Pak hier de opties">
<div draggable="true" ondragstart="drag(event)" style="float: left;" id="option-1" class="label label-default">Optie 1</div>
<div draggable="true" ondragstart="drag(event)" style="float: left;" id="option-2" class="label label-default">Optie 2</div>
<div draggable="true" ondragstart="drag(event)" style="float: left;" id="option-3" class="label label-default">Optie 3</div>
<div draggable="true" ondragstart="drag(event)" style="float: left;" id="option-4" class="label label-default">Optie 4</div>
</div>
<div class="form-control" ondrop="dropOrder(event)" ondragover="allowDrop(event)" id="drop-to" placeholder="sleep ze in de juiste volgorde hier naartoe"></div>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

</body>
</html>

【讨论】：