I have two lists I want to use Jquery UI sortable on. The way it is supposed to work is that list One contains a selection of items some of may be dragged to list 2. However sorting within list 1 or dragging back from list 2 to list 1 should not be allowed, finally sorting within list 2 is allowed.

The lists are like this

<ul class="sortable" id = "list1">
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
    <li> Item 4 </li>
</ul>

<ul class="sortable" id = "list2">
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
    <li> Item 4 </li>
</ul>

My current sortable call looks like this

$('#list1, #list2').sortable({
    helper: "clone",
    placeholder: "selected-option",
    forcePlaceholderSize: true,
    dropOnEmpty: true,
    connectWith: '.sortable',
    tolerance: "pointer",
    revert: true,
    cursor: "move",
    receive: function (event, ui) {
        // existing logic

    },
    update: function (event, ui) {
        // existing logic
    }
});

I know that I will have to manipulate the stop, receive functions on the sortable call to achieve this, but am not able figure out how to ..

I have two lists I want to use Jquery UI sortable on. The way it is supposed to work is that list One contains a selection of items some of may be dragged to list 2. However sorting within list 1 or dragging back from list 2 to list 1 should not be allowed, finally sorting within list 2 is allowed.

The lists are like this

<ul class="sortable" id = "list1">
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
    <li> Item 4 </li>
</ul>

<ul class="sortable" id = "list2">
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
    <li> Item 4 </li>
</ul>

My current sortable call looks like this

$('#list1, #list2').sortable({
    helper: "clone",
    placeholder: "selected-option",
    forcePlaceholderSize: true,
    dropOnEmpty: true,
    connectWith: '.sortable',
    tolerance: "pointer",
    revert: true,
    cursor: "move",
    receive: function (event, ui) {
        // existing logic

    },
    update: function (event, ui) {
        // existing logic
    }
});

I know that I will have to manipulate the stop, receive functions on the sortable call to achieve this, but am not able figure out how to ..

• javascript
• jquery
• jquery-ui
• jquery-ui-sortable

1 Answer 1

$('#list1, #list2').sortable({
  helper: "clone",
  placeholder: "selected-option",
  forcePlaceholderSize: true,
  dropOnEmpty: true,
  connectWith: '.sortable',
  tolerance: "pointer",
  revert: true,
  cursor: "move",
  beforeStop: function (event, ui) {
    if($(ui.helper).parent().attr('id') === 'list1' && $(ui.placeholder).parent().attr('id') === 'list1')
       return false;
    else if($(ui.helper).parent().attr('id') === 'list2' && $(ui.placeholder).parent().attr('id') === 'list1')
        return false;
  }
});

http://jsfiddle/py7FN/