javascript - 拖放 HTML 有限制

Question

我正在尝试创建一个基于 HTML5/Bootstrap 的拖放工具，但没有取得太大成功，并且可以预设限制。

解释这一点的最好方法是食物菜单创建者。所以我想要的是在 3 列 div 的左侧有一个成分列表，网站用户可以从预设成分列表中拖动元素并将它们放入将显示在页面右侧的菜单日历中在 9 列分区中。

我可以使用以下脚本执行此操作 - http://mdn.github.io/drag-and-drop/copy-move-DataTransfer.html

JavaScript:

function dragstart_handler(ev) {
 console.log("dragStart");
 // Change the source element's background color to signify drag has started
 ev.currentTarget.style.border = "dashed";
 // Add the id of the drag source element to the drag data payload so
 // it is available when the drop event is fired
 ev.dataTransfer.setData("text", ev.target.id);
 // Tell the browser both copy and move are possible
 ev.effectAllowed = "copyMove";
}
function dragover_handler(ev) {
 console.log("dragOver");
 // Change the target element's border to signify a drag over event
 // has occurred
 ev.currentTarget.style.background = "lightblue";
 ev.preventDefault();
}
function drop_handler(ev) {
  console.log("Drop");
  ev.preventDefault();
  // Get the id of drag source element (that was added to the drag data
  // payload by the dragstart event handler)
  var id = ev.dataTransfer.getData("text");
  // Only Move the element if the source and destination ids are both "move"
  if (id == "src_move" && ev.target.id == "dest_move")
    ev.target.appendChild(document.getElementById(id));
  // Copy the element if the source and destination ids are both "copy"
  if (id == "src_copy" && ev.target.id == "dest_copy") {
   var nodeCopy = document.getElementById(id).cloneNode(true);
   nodeCopy.id = "newId";
   ev.target.appendChild(nodeCopy);
  }
}
function dragend_handler(ev) {
  console.log("dragEnd");
  // Restore source's border
  ev.target.style.border = "solid black";
  // Remove all of the drag data
  ev.dataTransfer.clearData();
}

HTML:

<h1>Drag and Drop: Copy and Move elements with <code>DataTransfer</code></h1>
 <div draggable="true" id="src_copy" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);">
     Select this element and drag to the <strong>Copy Drop Zone</strong>.
 </div>
 <div id="dest_copy" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"><strong>Copy Drop Zone</strong></div>
 <div draggable="true" id="src_move" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);">
     Select this element and drag to the <strong>Move Drop Zone</strong>.
 </div>
 <div id="dest_move" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"><strong>Move Drop Zone</strong></div>

但是，我需要的是限制。因此，例如，如果某个菜单说你只能使用 6 个鸡蛋，我需要鸡蛋出现在左侧成分列中，当有人拖放 6 个鸡蛋时，无论鸡蛋可能仍在成分中，他们都不能再添加了列表。理想情况下，我希望它在使用/选择 X 数量的鸡蛋后消失。因此，如果我们将鸡蛋设置为 6，那么如果将鸡蛋放入右侧 6 次，则该元素将从左侧列中消失。

我还需要用户能够将其拖出拖放区(右侧)并放回左侧栏内，例如，如果他们改变主意了。最后，我需要它在末尾有一个转换为 pdf 的选项，这样当有人填写他们的菜单时，他们可以单击一个按钮并将显示的 html 转换为 pdf 或打印它。

在外包给 Freelancer 之前，我打算自己尝试一下 - 但我对使用 dataTransfer 和适当的处理程序还很陌生。

任何人都知道那里有什么或对如何实现我想要的有任何想法吗？

Answer 1

您需要更改放置事件 (ondrop="drop_handler(event);") 以检查是否满足要在列表中输入的元素的要求。

与将元素拖出相同。检查元素是从哪个列表中拖动的，并将其添加到另一个列表中。