Sortable items drag underneath other DOM elements

Question

I've got a page where users drag elements from one "pane" (a pool of items) into another pane (a list of items into one of which the pool items can be dragged). I am moving, not copying items.

Think of assigning orders from an order well onto trucks.

Each of the sortable lists is divided into 2 tabs representing different types of orders (maybe bulk products vs. packaged products).

All of the moving among the various lists works great. When the tab on one list changes from one order type to another, all of the tab controls change their active tab, too.

What is happening weird, though, is when I move an item from the left hand order well into the right hand assignment pane, the item slides under the DOM elements on the right side. However, as long as the mouse pointer is on the correct list, the item will be dropped correctly.

I can't figure out why this is.

Answer 1

It's because of the z-index of the items. When you're dragging an item, you probably want to make its z-index a high number temporarily.