CODEWITHSUNDEEP
javascriptdrag-and-dropz-index
user823527
user823527

Reputation: 3712

Effects of z-index on drag and drop between two divs

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.

Upvotes: 1

Views: 5277

Answers (2)

user823527
user823527

Reputation: 3712

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/ .

Upvotes: 1

Mohsen
Mohsen

Reputation: 65785

There is a class name that jQuery UI draggable add to elements that are dragging. This class is removed after drag finishes. This class called ui-draggable-dragging. if you add an high z-index to the ui-draggable-dragging class your problem will be solved. It should solve your problem. It seems your code have bugs. Debug it and add this css. It will work then.

 .ui-draggable-dragging{z-index:9999;}

Upvotes: 0

Related Questions