Drag and drop elements with different id's into their corresponding dropzones

Question

I have twelve arguments with different id's that i'd like to drag and drop into their corresponding clouds. Each of the four clouds has atleast three corresponding arguments. Should the wrong argument be dropped in the wrong cloud then there should be an error message displayed and the wrong argument sent back to the initial placeholder. I have so far succeeded in coding the drag and drop but i can't seem to direct the draggables to their intended dropzones owing to the number of id's involved. I would appreciate any help.

Here is my html and javascript code

   
var dragged;

  /* events fired on the draggable target */
  document.addEventListener("drag", function( event ) {

  }, false);

  document.addEventListener("dragstart", function( event ) {
      // store a ref. on the dragged elem
      dragged = event.target;
      // make it half transparent
      event.target.style.opacity = .5;
  }, false);

  document.addEventListener("dragend", function( event ) {
      // reset the transparency
      event.target.style.opacity = "";
  }, false);

  /* events fired on the drop targets */
  document.addEventListener("dragover", function( event ) {
      // prevent default to allow drop
      event.preventDefault();
  }, false);

  document.addEventListener("dragenter", function( event ) {
      // highlight potential drop target when the draggable element enters it
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "purple";
      }

  }, false);

  document.addEventListener("dragleave", function( event ) {
      // reset background of potential drop target when the draggable element leaves it
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
      }

  }, false);

  document.addEventListener("drop", function( event ) {
      // prevent default action (open as link for some elements)
      event.preventDefault();
      // move dragged elem to the selected drop target
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
          dragged.parentNode.removeChild( dragged );
          event.target.appendChild( dragged );
      }
    
  }, false);


            Was ist mit
            Individualismus
            Der Trittbettfahrer-Vorwand
            Technologischer Optimismus 
            Alles Gerede, wenig Handlung
            Lösungskonzept Fossile Energieträger
            Keine Peitsche, nur Zuckerbrot 
            Berufung auf Soziale Gerechtigkeit 
            Perfektionismus
            Berufung auf Wohlstand 
            Der Untergang
            Veränderung ist unmöglich

user_8233548 · Answer

Ok, so if I understood correctly what you wanted was to drag element to dropzone and allow operation if some condition is passed, else return the element from where we started dragging it.

What I did in below snippet is I gave each div an attribute called group which you can access using element.attributes.group.value and only allowing the detach logic to trigger if the dragged element has that group number. hope this will give you idea to implement what you are trying to achieve.

also if you define function for ondrop ondrag etc then you have to define them as function to avoid getting console error as HTML will look for these function in JS.

var dragged;

function allowDrop(event) {}
/* events fired on the draggable target */
function drag(event) {

}

document.addEventListener("dragstart", function(event) {
  // store a ref. on the dragged elem
  dragged = event.target;
  // make it half transparent
  event.target.style.opacity = 0.5;
}, false);

document.addEventListener("dragend", function(event) {
  // reset the transparency
  event.target.style.opacity = "";
}, false);

/* events fired on the drop targets */
document.addEventListener("dragover", function(event) {
  // prevent default to allow drop
  event.preventDefault();
}, false);

document.addEventListener("dragenter", function(event) {
  // highlight potential drop target when the draggable element enters it
  if (event.target.className == "dropzone") {
    event.target.style.background = "purple";
  }

}, false);

document.addEventListener("dragleave", function(event) {
  // reset background of potential drop target when the draggable element leaves it
  if (event.target.className == "dropzone") {
    event.target.style.background = "";
  }

}, false);

function drop(event) {
  // prevent default action (open as link for some elements)
  event.preventDefault();
  // move dragged elem to the selected drop target
  //check if the target is dropzone and dragged element have the required group value if yes allow append child else dont do anything just reset color and opacity
  debugger;
  if (event.target.className == "dropzone" && dragged.attributes.group.value == event.target.attributes.group.value) {
    event.target.style.background = "";
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild(dragged);
    //you may wanna comment success message as these may be annoying
  } else {
    if (event.target.className == "dropzone") {
      event.target.style.background = "";
    }
    dragged.style.opacity = 0.5;
    alert('please drop the item to section : '+dragged.attributes.group.value)
  }



}


  Was ist mit
  Individualismus
  Der Trittbettfahrer-Vorwand
  Technologischer Optimismus 
  Alles Gerede, wenig Handlung
  Lösungskonzept Fossile Energieträger
  Keine Peitsche, nur Zuckerbrot 
  Berufung auf Soziale Gerechtigkeit 
  Perfektionismus
  Berufung auf Wohlstand 
  Der Untergang
  Veränderung ist unmöglich

Drag and drop elements with different id's into their corresponding dropzones

1 Answers