I have two lists #sortable1
and #sortable 2
which are connected sortables, as shown in this example.
You can drag and drop list items from sortable1
to sortable 2
. However, if an item in sortable 1 contains the class "number", I want to prevent the drop on Sortable2 and thus make the dragged item drop back into sortable 1.
I have used the following on sortable2:
receive: function (event, ui) {
if ($(ui.item).hasClass("number")) {
$(ui.item).remove();
}
but it deletes the list item from both tables altogether. Any help will be appreciated.
You can use a combination of the stop
and sortable('cancel')
methods to validate the item being moved. In this example, upon an item being dropped, I check if the item is valid by:
number
list2
This is slightly more hard-coded that I'd like, so alternatively what you could do is check the parent of the dropped item against this
, to check if the lists are different. This means that you could potentially have an item of number
in list1
and list2
, but they're not interchangeable.
$(function() {
$('ul').sortable({
connectWith: 'ul',
stop: function(ev, ui) {
if ($(ui.item).hasClass('number') && $(ui.placeholder).parent()[0] != this) {
$(this).sortable('cancel');
}
}
});
});ā