我试图创建一个基于HTML5 / Bootstrap的拖放功能,并且可以预设限制,但没有太大的成功。
解释这个的最佳方式是食物菜单创建者。所以我想要的是在3列div中左侧有一个成分列表,网站用户可以从预设成分列表中拖动项目并将其放入菜单日历中,该日历将显示在页面右侧在9 col div。
我可以使用以下脚本执行此操作 - 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或打印它。
在考虑外包给自由职业者之前,我正在考虑自己尝试一下 - 但我非常乐意使用dataTransfer和合适的处理程序。
任何人都知道有什么或者有关如何实现我想要的任何想法?
答案 0 :(得分:0)
您需要更改您的丢弃事件(ondrop =&#34; drop_handler(event);&#34;)以检查是否符合要在列表中输入的项目的要求。
同样将项目拖回来。检查项目被拖动的列表,并添加到其他列表中。