Jquery sortable

Question

function dropMembers()
{

    $("ul.present").sortable({
  connectWith: 'ul',
        containment: 'window'
        //containment: 'ADD_MEMBER_DIALOG'
//            sort: function(event, ui) {
//                var present_result=$("ul.present").sortable('toArray');
//               // alert(ui.sortable);
//            }

 });

 $("ul.usrlist").sortable({
  connectWith: 'ul',
  dropOnEmpty: true,
        containment: 'window'
//             sort: function(event, ui) {
//             var usr_result=$("ul.usr").sortable('toArray');
//             //alert(ui.sortable);
//            }
 });

 $("#USER_PRESENT_LIST, #MAIN_USER_LIST").disableSelection();

}

Hi All, The function given above does sorting between two list but if a move an element from one list over the other and drop it outside the window then what happens is the element that i dragged gets appeneded in the other list at the place from where i moved it. Can anyone tell me how can i stop it from appeneding in the other list and if i try to do the same thing as mentioned above then it should get back to the same list from where it was dragged. Thanks

Answer 1

Remove your connectWith lines? You're telling jQueryUI that items can be passed to other ul's, and yet you say you don't want that.

Answer 2

You can dodge the issue by giving the sortables a smaller containment area. Instead of the entire window, try using the parent div or table cell, and arrange the lists so that there is no dead space, i.e. nowhere the user can drag an element where it isn't clear which list the element should end up in.