CODEWITHSUNDEEP
jquery-uijquery-ui-sortable
Andreas Köberle
Andreas Köberle

Reputation: 111092

Jquery ui sortable with connected lists

How can I connect 2 list so that I can only drop the items from list 1 into list 2, including placeholders in list 2 but not in list 1.

I know there is connectWith but how could I prevent that the items can be reordered in list1

Upvotes: 1

Views: 996

Answers (2)

Andreas Köberle
Andreas Köberle

Reputation: 111092

Final solution: http://jsbin.com/volote/1/edit?html,css,js,output

$("#sortable1, #sortable2").sortable({
  connectWith: "#sortable2",
  helper: 'clone',

  placeholder: 'gap',
  forcePlaceholderSize: true,
  start: function(e, ui) {
    ui.item.show();
  },

  stop: function(e, ui) {
    if (ui.item.parent().is("#sortable1")) {
      $(this).sortable("cancel");
    }else{ 
     console.log(ui.item.text())
     console.log(ui.item.index())
    }
  },

  receive: function(e, ui) {
    if (ui.item.parent().is("#sortable2")) {
      console.log(ui.item.text())
      console.log(ui.item.index())
      ui.item.clone().insertAfter(ui.item);
      $(ui.sender).sortable("cancel");
    }
  }
})

$("#sortable2").sortable({
  helper: 'original',
})

Upvotes: 0

blgt
blgt

Reputation: 8215

You can do this with a combination of the stop and receive events and by using the cancel() function:

$("#list1").sortable({
    connectWith: ".sortables",
    stop: function(e, ui) {
        if ( $(ui.item).parent().is(this) ) {
            $(this).sortable("cancel");
        }
    },
    receive: function(e, ui) {
        $(ui.sender).sortable("cancel");
    }
});
$("#list2").sortable({connectWith: ".sortables"});

Explanation: stop is used to check if sorting an element originating within the same widget; receive is used to check if sorting an element originating in other widgets.

Here's an example fiddle: http://jsfiddle.net/hrvj2qnd/

Doc reference: http://api.jqueryui.com/sortable/

Upvotes: 1

Related Questions