I am using Jquery to making drag and drop.

My short javascript to make an item to drag is:

$(".draggable").draggable();

My short javascript to make a dropable area is:

$("#droppable").droppable();

Here is my dragable item short HTML code:

 <div id="Item[]" class="puterItem draggable">
    <img src="img/.png" class="assetImg" alt="Computer Info" title="">
    <span id="owner[]" class="textLabel"></span>
    <span id="ipaddress[]" class="textLabel"></span>
 </div>

Does someone know how to get the values from dropped items in dropable area? I want to create the object array form the dropped items?

Thank you so much.

I am using Jquery to making drag and drop.

My short javascript to make an item to drag is:

$(".draggable").draggable();

My short javascript to make a dropable area is:

$("#droppable").droppable();

Here is my dragable item short HTML code:

 <div id="Item[]" class="puterItem draggable">
    <img src="img/.png" class="assetImg" alt="Computer Info" title="">
    <span id="owner[]" class="textLabel"></span>
    <span id="ipaddress[]" class="textLabel"></span>
 </div>

Does someone know how to get the values from dropped items in dropable area? I want to create the object array form the dropped items?

Thank you so much.

• javascript
• jquery
• html
• css
• drag-and-drop

• are you using a library like jQuery ui? – Shiala Commented Dec 3, 2014 at 4:14
• Im using jquery & jquery-ui. – Salapaosaikai Commented Dec 3, 2014 at 4:17
• cerlin beat me to it, his answer should do – Shiala Commented Dec 3, 2014 at 4:20

2 Answers 2

You can use the ui.draggable object in drop action

$( "#droppable" ).droppable({
    drop: function( event, ui ) {
        $(this).append($(ui.draggable).find('img'));
    }
})

Here ui.draggable is the element which you have dropped. (in this case the whole div)

You must use the drop event for droppable. Here is what I mean.

var items;
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
    drop: function(event,ui) {
        items = [ui.draggable];
    }
});

Here is a working fiddle http://jsfiddle/wLkutytx/

Source: http://api.jqueryui./droppable/#event-drop