javascript - Drag & Drop HTML with Restictions -

i'm trying without success create html5 / bootstrap based drag , drop facility restrictions can preset.

the best way of explaining food menu creator. want have list of ingredients on left side in 3 column div , website user can drag items list of preset ingredients , drop them menu calendar shown on right of page in 9 col div.

i can using following script - http://mdn.github.io/drag-and-drop/copy-move-datatransfer.html

javascript:

function dragstart_handler(ev) {  console.log("dragstart");  // change source element's background color signify drag has started  ev.currenttarget.style.border = "dashed";  // add id of drag source element drag data payload  // available when drop event fired  ev.datatransfer.setdata("text", ev.target.id);  // tell browser both copy , move possible  ev.effectallowed = "copymove"; } function dragover_handler(ev) {  console.log("dragover");  // change target element's border signify drag on event  // has occurred  ev.currenttarget.style.background = "lightblue";  ev.preventdefault(); } function drop_handler(ev) {   console.log("drop");   ev.preventdefault();   // id of drag source element (that added drag data   // payload dragstart event handler)   var id = ev.datatransfer.getdata("text");   // move element if source , destination ids both "move"   if (id == "src_move" && ev.target.id == "dest_move")     ev.target.appendchild(document.getelementbyid(id));   // copy element if source , destination ids 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 of drag data   ev.datatransfer.cleardata(); } 

html:

<h1>drag , drop: copy , move elements <code>datatransfer</code></h1>  <div draggable="true" id="src_copy" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);">      select element , drag <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 element , drag <strong>move drop zone</strong>.  </div>  <div id="dest_move" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"><strong>move drop zone</strong></div> 

however, need restrictions. example if menu says can use 6 eggs, need eggs appear in left side ingredient column , when drags , drops 6 eggs, cannot add more regardless eggs may still in ingredient list. ideally disappear after x amounts of eggs have been used / selected. if set eggs @ 6 if eggs dropped right side 6 times, item disappears left column.

i need user able drag out of drop-zone (right side) , place inside left column if instance change mind. finally, need have convert pdf option @ end when fills menu, can click button , convert displayed html pdf or print it.

i deliberating trying myself before outsourcing freelancer - pretty novice using datatransfer , appropriate handlers.

anyone know of out there or thoughts on how achieve want?

you need change on drop event (ondrop="drop_handler(event);") check whether requirements met item entered in list.

same dragging item out. check list item dragged , add other list.