Jquery Drag n Drop Stage

Question

Hi Experts,

I am trying to create a stage. I have 5 items in a draggable div. There clones will be dragged to 20 droppable areas.

I have created 20 boxes of divs with different ids. Means multiple drop able areas.

The problem is that I don't have the idea that how can I get id the of the div where the item is dropped and how, I will show that product only in that div. Right now it is displaying all of the items in a single first div.

The main problem is that how can we create multiple droppable areas dynamically and drop an item in that specific area.

Thanks in Advance

Answer 1

jQuery-ui Draggable Droppable event handler

You need to get the droppable dom object from the event arguments passed to the drop method.

$( ".selector" ).droppable({
  drop: function(event, ui) { 
    // $(this) represents the droppable.
    alert($(this).attr("id"));
  }
});

the draggable object can be referenced through ui.draggable. Most of this was taken from the jQuer-ui documentation found at the jQuery-ui Website

Adding Droppable to a Dynamically Added Element

In the event that the elements, let's call them stage targets, are being added dynamically to the "stage" then you would want to call the droppable method on those elements when they are created.

function makeStageTargets(i) {
  for(i;i--;true){
    var d = $("div").attr("id","item_"+i); // this will make a div id item_i
    $("stage").append(d);
    d.droppable(
      drop:function(e, ui){
        var param = $(ui.draggable).attr('src');
        $("stage").remove(ui.draggable); // this will remove an item when dropped
        addlist(param);
      });
  }
}
makeStageTargets(60);

If I have missed the spirit of your question please advise.

Answer 2

Here is the code I am using

$("div_item").droppable({

        drop:
            function(e, ui)
                {
                    var param = $(ui.draggable).attr('src');

                    addlist(param);
                }

});

Where addlist() is a function to get ajax contents and display in div like $('#div_item').append(msg.txt);

'msg' variable to get the item detail from ajax file.

The problem is with id div_item. These are more than 20, colud be upto 60. I also want to restrict each div with a single dropped in it. Many thanks for your help