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
Add a comment
|
2 Answers
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/
4 Comments
Andreas Köberle
Thanks, is there way to prevent the placeholder in list1 as well?
blgt
What do you mean by prevent the placeholder?
Andreas Köberle
The gap between to items when start dragging.
blgt
You can use the
placeholder option and whatever css you want: jsfiddle.net/hrvj2qnd/1 , jsfiddle.net/hrvj2qnd/2Final 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',
})