How can I do multiple jQuery UI drag and drops?

Question

Thanks in advance for taking the time to look at my question.

Using jQuery & jQuery UI, I have been trying to drag elements such as a bandage, plaster and puddle of water onto individual elements of a stick man. For example, if the bandage is dropped onto his left arm, the background image of the left arm changes to having a bandage on it.

At one point, my code could drag and drop the first item you selected - which was a start. Now, I've lost that and it is just doing the last element in the list of jQuery, which in this case is dragging the puddle of water onto elements of the stick man.

I have been trying to correct it for hours now and can't solve the problem!!

If anyone could help it would be appreciated.

$(document).ready(function () {
  //Drag bandage
  $(".draggableBandage").draggable({ containment: ".scenarioSec", cursor: "pointer", helper: "clone" });
  //Drop bandage on right arm 
  $("#droppableRightArm").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpRightArmBandage")
    }
  });
  //Drop bandage on right leg
  $("#droppableRightLeg").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpRightLegBandage")
    }
  });
  //Drop bandage on head
  $("#droppableHead").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpHeadBandage")
    }
  });
  //Drop bandage on left arm
  $("#droppableLeftArm").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpLeftArmBandage")
    }
  });
  //Drop bandage on left leg
  $("#droppableLeftLeg").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpLeftLegBandage")
    }
  });
});
$(document).ready(function () {
  //Drag plaster 
  $(".draggablePlaster").draggable({ containment: ".scenarioSec", cursor: "pointer", helper: "clone" });
  //Drop plaster on right arm
  $("#droppableRightArm").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpRightArmPlaster")
    }
  });
  //Drop plaster on right leg
  $("#droppableRightLeg").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpRightLegPlaster")
    }
  });
  //Drop plaster on head
  $("#droppableHead").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpHeadPlaster")
    }
  });
  //Drop plaster on left arm
  $("#droppableLeftArm").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpLeftArmPlaster")
    }
  });
  //Drop plaster on left leg
  $("#droppableLeftLeg").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpLeftLegPlaster")
    }
  });
});
$(document).ready(function () {
  //Drag water
  $(".draggableWater").draggable({ containment: ".scenarioSec", cursor: "pointer", helper: "clone" });
  //Drop water on right arm
  $("#droppableRightArm").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpRightArmWater")
    }
  });
  //Drop water on right leg
  $("#droppableRightLeg").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpRightLegWater")
    }
  });
  //Drop water on head
  $("#droppableHead").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpHeadWater")
    }
  });
  //Drop water on left arm
  $("#droppableLeftArm").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpLeftArmWater")
    }
  });
  //Drop water on left leg
  $("#droppableLeftLeg").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpLeftLegWater")
    }
  });
});

Cases like this it's best to build an example on jsfiddle.net — cillierscharl

cillierscharl cillierscharl · Accepted Answer · 2012-11-15T00:23:15

Ok, so everytime you attach a new droppable event handler it overwrites the previous one you had thus the last one is the only one working.

So what I suggest is that you handle the type of object that is being dropped and have one event handler per limb.

The way I am finding out what item was dropped is by using data- attributes in the markup and then pulling them out on the dropped event.

What this means is you can write very generic code that will dynamically apply the css style appropriate by appending the object type to the class name.

<div class="draggableObject bandage" data-object="Bandage"></div>
<div class="draggableObject plaster" data-object="Plaster"></div>

Here is the javascript example: Here is a link to a quick demo in JSFiddle

$(document).ready(function() {
    $('.draggableObject').draggable();

    $('.droppableRightArm').droppable({
        drop: function(event, ui) {
            var $this = $(this); // reuse JQuery object.
            var droppedObject = ui.draggable.data('object'); // get object type
            // css reset
            $this.removeClass();
            $this.addClass("rpRightArm" + droppedObject);
            //
        }
    });
});

How can I do multiple jQuery UI drag and drops?

1 Answers