drag multiple elements at the same time to the drop area - php

Question

I'm new to jQueryUI and I'm not able to drag multiple <li> elements to the drop area. However I managed to drag one and drop it on the drop area. Please can anyone help me with this.
JavaScript
$(function() {
$trash= $( "#trash" );
$("a", ".polaroids").draggable({
zIndex: 999,
revert: "invalid" ,
helper: function(){
$copy = $(this).clone();
return $copy;},
appendTo: 'body',
scroll: false
});
$("a", ".polaroids").selectable();
$trash.droppable({
accept: ".polaroids a",
activeClass: "custom-state-active",
drop: function( event, ui ) {
$(this).append(ui.draggable);
}
});
});
Here is the <div> in which the <li> elements are dragged but one by one
<div class="st_view_container">
<div class="st_view">
<?php
foreach($gpID as $k => $v) {
?>
<div id="stv_content_<?php echo $v;?>" class="st_tab_view st_first_tab_view">
<ul class="polaroids" id ="polaroids">
<?php
$sql2=mysql_query("select * from user_group WHERE group_id='$v' AND user_id=3");
$i=1;
while($row=mysql_fetch_array($sql2)) {
$memid=$row['member_id'];
$sql1=mysql_query("select * from users_profile WHERE uid='$memid'");
while($row1=mysql_fetch_array($sql1)) {
$ufname=$row1['fname'];
$ulname=$row1['lname'];
$upic=$row1['profile_pic'];
?>
<li>
<a href="#" title="<?php echo $ufname; ?>">
<img src="../<?php echo $upic; ?>" rel="<?php echo $row1['uid']?>" width="65px" height="65px" />
</a>
</li>
<?php
if($i%6==0) {;}
$i++;
}
?>
</ul>
</div>
<?php } ?>
</div> <!-- /.st_view -->
</div> <!-- /.st_view_container -->
and here is the <div> in which i want the multiple elements to be dropped, but not one by one.
<div id="trash" style="width:200px; height:200px; border:1px solid;">
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
</div>

Answer 1

Here is a demo based on some research…
Is it possible to link two jquery.ui draggables together?
grouping draggable objects with jquery-ui draggable
Can't drop jquery ui helper on droppable
How to reimplement jQuery's default helper in a custom helper
and me playing with the jQueryUI droppable photo manager demo which is what you are using as a template.
Functionality includes single click and drag (as is the default behaviour) or use Ctrl+left click to select multiple items and then drag. The drag helper function is used to select all the items with class="selected" and the drop function is customised to extract the img elements from the container the drag helper added them to. The other function simple enables the Ctrl+click behaviour.
The following code is duplicated below from the demo but does require jQuery, jQueryUI and one of the jQueryUI themes.
HTML
<ul id="draggable">
<li><img src="nature-q-c-50-50-1.jpg" alt="" /></li>
<li><img src="nature-q-c-50-50-2.jpg" alt="" /></li>
<li><img src="nature-q-c-50-50-3.jpg" alt="" /></li>
<li><img src="nature-q-c-50-50-4.jpg" alt="" /></li>
<li><img src="nature-q-c-50-50-5.jpg" alt="" /></li>
<li><img src="nature-q-c-50-50-6.jpg" alt="" /></li>
</ul>
<div id="trash">
<h4 class="ui-widget-header">Trash<span class="ui-icon ui-icon-trash"></span></h4>
</div>
CSS
body {
font-family:"Trebuchet MS";
}
#draggable {
margin:0;
padding:10px;
width:300px;
list-style-type:none;
background-color:#000;
}
li {
display:inline;
}
img {
border:5px solid white;
}
.image-group img {
margin-right:5px;
}
#trash {
margin-top:10px;
width:200px;
height:200px;
border:1px dotted #000;
}
.selected {
border-color:#aed0ea
}
#trash h4 {
margin:0;
padding:0 5px;
}
.ui-icon {
display:inline-block;
}
JavaScript
$('#draggable li').draggable({
revertDuration:100,
helper:function() {
var selected = $('#draggable img.selected');
if (selected.length === 0) {
selected = $('img', $(this)).addClass('selected');
}
console.log('selected', selected);
var container = $('<div class="image-group"/>');
container.append(selected.clone());
console.log('container', container);
return container;
},
cursorAt:{ left:25,top:25 }
});
$('#trash').droppable({
drop: function(event, ui) {
var newItems = $(ui.helper).find('img').clone(false)
.removeClass('selected');
$(this).append(newItems);
console.log('ui.draggable', ui.draggable);
$('#draggable img.selected').parent().remove();
}
});
$('#draggable li').click(function(event) {
if (event.ctrlKey) {
$('img', $(this)).toggleClass('selected');
}
});