drag multiple elements at the same time to the drop area

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');
    }
});