CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-sortable
ezw
ezw

Reputation: 432

jQuery sortable child won't go into parent

If one of those parents are emptied (the children moved over to the other parent) then you won't be able to move the child back to the empty parent.

https://jsfiddle.net/k8x7om75/

    // Sort the parents
    $(".sortMenu").sortable({
        containment: "document",
        items: "> div",
        tolerance: "pointer",
        cursor: "move",
        opacity: 0.7,
        revert: 300,
        delay: 150,
        placeholder: "menuPlaceholder",
        start: function(e, ui) {
            ui.placeholder.height(ui.helper.outerHeight());
        }
    });

    // Sort the children
    $(".menuItems").sortable({
        items: "> div",
        tolerance: "pointer",
        containment: "document",
        connectWith: '.menuItems'
    });

Normally I'd do myself, but I don't know JavaScript or any of it's flavors. Sorry if this seems trivial, but I need help on this. Thank you

Upvotes: 1

Views: 381

Answers (1)

Gopalkrishna Narayan Prabhu
Gopalkrishna Narayan Prabhu

Reputation: 679

add the following css: 

.ui-sortable{
   padding: 5px;
 }

You are facing this issue because as soon as your parent container becomes empty then the height of the sortable div in the parent container becomes 0 leaving no place for a child to be dragged back into it.

if you do not want the extra padding, then make the css as follows:

 .ui-sortable{
     min-height: 10px;
  }

Upvotes: 2

Related Questions