HTML5/Bootstrapベースのドラッグ＆ドロップ機能を作成するには、あまり効果がないまま、プリセットできる制限があります。レクリエーションのドラッグ＆ドロップ
これを説明する最良の方法は、食品メニューの作成者です。だから私が望むのは、3列のdivの左側に成分リストを表示し、ウェブサイトのユーザーがプリセット成分のリストから項目をドラッグして、ページの右側に表示されるメニューカレンダーにドロップすることです9 col部門で
私は次のスクリプトを使用してこれを行うことができます - 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と適切なハンドラを使用するのはかなり初心です。
誰でも知っていることを知っているか、私が欲しいものを達成するための考え方はありますか？