jQuery Sortable, clone and appendTo, helper disappearing

Question

Question is that the clone helper on jQuery Sortable is not showing itself with the following settings:-

    $('#sortable').sortable({
        items: "li",
        helper: "clone",
        appendTo: "body",
        placeholder: "ui-state-highlight"
    });

Essentially, the placeholder is being shown, but the actual helper cloned element is not.

appendTo and helper are necessary because without the helper and appendTo, when I seek to drag the LI element, the li element will sometimes disappear and be deleted when dropped.

I can confirm there is no overflow css on the parent <ul> and that the disappearing <li> also happens when appendTo is set to parent. Containment did not prevent the <li> from disappearing.

I am using jQuery UI 1.10.2. Anyone konw how to address this?

EDIT: To be clear, I've identified that the item is disappearing into a child sortable, because there are intersecting divs in the list structure containing child sortable elements.

Is it possible to reject an LI element with a certain class from a sortable? Whats happening is that the LI is dropping into the child sortable even though it has no connectWith The LI needs to only be sortable inside its parent sortable and not try to insert itself in a child sortable (they even have separate ids and separate classes so not sure why this is happening).

Resurgent Resurgent · Accepted Answer · 2016-10-16T20:34:50

Partial Solution:

stop: function(event, ui){
if(ui.item.parent().attr('id') !== 'sortable'){
  $("#sortable").sortable("cancel");
  }
},

If anyone has a better solution, please do let me know.

jQuery Sortable, clone and appendTo, helper disappearing

1 Answers