拖放带有限制的HTML

Question

I'm trying without much success to create a HTML5 / Bootstrap based drag and drop facility with restrictions that can be preset.

The best way of explaining this would be a food menu creator. So what I want is to have a list of ingredients on the left side in a 3 column div and the website user can drag items from the list of preset ingredients and drop them into the menu calendar which will be shown on the right of the page in a 9 col div.

I can do this using the following script - 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>

However, what I need is restrictions. So for example if a certain menu says you can only use 6 eggs, I need eggs to appear in the left side ingredient column and when someone drags and drops 6 eggs, then they cannot add any more regardless that eggs may still be in the ingredient list. Ideally I would like it to disappear after X amounts of eggs have been used / selected. So if we set eggs at 6 then if eggs are dropped into the right side 6 times, the item disappears from the left column.

I also need the user to be able to drag back out of the drop-zone (right side) and place back inside the left column if for instance they change their mind. Finally, I need it to have a convert to pdf option at the end so when someone fills their menu, they can click a button and convert the displayed html into a pdf or print it.

I am deliberating trying it myself before outsourcing to Freelancer - but I am pretty novice to using dataTransfer and appropriate handlers.

Anyone know of anything out there or any thoughts on how to achieve what I want?

Answer 1

You will need to change your on drop event (ondrop="drop_handler(event);") to check whether the requirements are met for the item to be entered in the list.

Same with dragging the item back out. Check which list the item is dragged from and add to the other list.