Given:

• 5 - images, (draggable)
• 3 - square boxes (dropzone)
• 3 - rectangle (display the "id" of an image drop in a box(dropzone))

can anyone know this? I want to drag multiple image in a single box(dropzone)..And every drop images "id" display in rectangle,

working sample here;

http://jsfiddle.net/Lz2dazLf/7/

html:

<table> <tr> <td> <div id="rang1" class="DropZone"></div> <input type="text" value="" id="rang1input" name="rang1value" /> </td> <td> <div id="rang2" class="DropZone"></div> <input type="text" value="" id="rang2input" name="rang2value" /> </td> <td> <div id="rang3" class="DropZone"></div> <input type="text" value="" id="rang3input" name="rang3value" /> </td> </tr> </table> <img src="http://s13.postimg.org/4n284uxur/image.jpg" id="1" class="DraggedItem"> <img src="http://s18.postimg.org/jiplggzr9/image.jpg" id="2" class="DraggedItem"> <img src="http://s9.postimg.org/an4b84v8r/image.jpg" id="3" class="DraggedItem"> <img src="http://s28.postimg.org/qvrxr44vd/image.jpg" id="4" class="DraggedItem"> <img src="http://s17.postimg.org/7gml38757/image.jpg" id="5" class="DraggedItem">

script:

 $(function() { $('.DraggedItem').draggable({ helper: 'clone', cursor: 'move', opacity: 1.0 }); var droppedOptions = { revert: 'invalid', cursor: 'move' }; $('.DropZone').droppable({ drop: function(ev, ui) { var dropped = ui.draggable; var droppedOn = $(this); if (ui.draggable.is('.DroppedItem')) { // Item is dragged from another slot, swap images var draggedFrom = ui.draggable.parent(); droppedOn.find('img').appendTo(draggedFrom); dropped.css({ top: 0, left: 0 }).appendTo(droppedOn); var temp = '' + droppedOn.next('input').val(); draggedFrom.next('input').val(temp); droppedOn.next('input').val(dropped.data('id')); } else { // Item is dragged from library droppedOn.empty() // Delete already dropped items .next('input') .val(dropped.attr('id')); $('<img class="DroppedItem">') .attr('src', dropped.attr('src')) .data('id', dropped.attr('id')) .draggable(droppedOptions) .appendTo(droppedOn); } } }); });