Geek Answers Handbook

JQueryUI sortable: only allow sorting to the second list, but not returning to the first

I have two lists in which I want to use jQuery UI. The way it should work is that list One contains a selection of items, some of which can be dragged to list 2. However, sorting in list 1 or dragging from list 2 to list 1 should not be allowed, final sorting by list 2 allowed.

Lists are as follows

<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 is as follows

$('#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, get functions on the sortable call to achieve this, but I can’t figure out how ..

+4
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.net/py7FN/

+6

More articles:


All Articles