jQuery UI Sortable: dragged element disappears

Question

I set the <div class="container"> .sortable(), and there are some elements in the container.

When I drag the inner element, intend to sort the element with the others, once the dragged one out the container, it can not be seen.

But when I drop it into place holder, it could be seen again. Online case is here.

Anyone have met the problem before? Or anyone can help me with the problem?

Thank you

Answer 1

Drop the overflow: hidden; on .container and it will work. The problem is that during the drag you're moving a child of .container outside of the .container element, you've told the browser to hide any overflow while you're forcing an overflow during the drag and the browser is doing what you told it to do.

General advice: leave overflow alone unless you know what it does and why you need to use it.

Answer 2

the trick is to set helper to 'clone' and use a temporary swaplist for the drag.. modified version of your code here

$( ".selector" ).sortable({
    helper: "clone"
});