Question

I have two container divs and want to drag and drop elements between them. I can drag and drop elements from the second container to the first but not the other way around. The problem is that the elements of the first container seem to have a lower z-index than the second container. When I drag them they slide under the second container. What must I do to have all the the elements be on top and be draggable to any droppable container? This is the fiddle showing the problem.

http://jsfiddle.net/vfAgd/12/

If you drag an element from container 1 to container 2, it goes under container 2. If you drag an element from container 2 you are able to drag it over container 1. This happens because container 2 is added to the document after container 1.

Answer 1

To fix this I had to remove the z-index for the containers.

.comdiv  { 
   padding: 0;
   margin-top: 20px;
   margin-left: 20px;
   border: 1px solid DarkKhaki;
   border-radius: 3px 3px 0px 0px;
   box-shadow: inset 0px 0px 10px DarkKhaki;
   /* z-index: 26; */
}

http://jsfiddle.net/vfAgd/17/ .