Jquery sortable element

Question

Hi All, How to access the jquery sortable element.

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();

}`

In this function i want to filter an element of ul.usrlist that is made sortable ie. i want to make an element in ul.usrlist to be non sortable. How can i do that

Answer 1

Refer to this demo in the docs. Basically add a class of ui-state-disabled to the items you dont want to be sortable then pass in the items when you define the sortable.

e.g

html

<ul id="sortable1">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default ui-state-disabled">(I'm not sortable or a drop target)</li>
    <li class="ui-state-default ui-state-disabled">(I'm not sortable or a drop target)</li>
    <li class="ui-state-default">Item 4</li>
</ul>

js

$("#sortable1").sortable({
   items: 'li:not(.ui-state-disabled)'
});