IE7: CSS & jQuery: dragging up, dragged item is on top, dragging down: dragged item is below. How do I get both to be on top?

Tags: jquery,css,internet-explorer,jquery-ui,internet-explorer-7

Problem :

Here is my jsfiddle code:

You'll notice that in IE7, when you drag an item up, it is visible until it is placed. But if you drag an item down, it somehow has a lower z-index than the things we could want to drag and drop the item into.

Any ideas?

Solution :

Somehow none of the fiddles that were produced work in my IE9 anymore, not even those, that were working before. Since the last posted revision (26) works in Opera, Chrome and FF, as well as Comp-Mode of IE and IE7, i have to assume it is related to either my IE or JSFiddle and should be working correctly.

I think that finally works.

On MouseDown increasing .closest('.section')'s z-index to 5000. On MouseUp lowering it to 1000.

The numbers are chosen randomly, no need to set it that high. Just make sure to lower it to something below your other z-index values

    CSS Howto..

    How to clear the parent css

    How to contain a scrollable div element completely within another?

    Jquery - How to alternate an :Odd :Even pattern every 4 ?

    How to make css background-blend-mode work with gradients?

    Responsive CSS - how to 'dynamically' align div to parent width with padding/margin?

    How to turn off spell checking in CSS?

    How to reset the CSS of HTML Elements?

    how to align css content string

    How To Fix This “Select” Drop Down Using Css [duplicate]

    How to create circles around a circle with css, javascript?

    how to get value of colors from CSS

    How to make the html table on same line? Wordpress, woocommerce

    How to Style Similar to an Exam Questi-n

    how to scroll text area horizontally?

    Newbie: How to have a row background in my case?

    How to change the position of image in search box in css?

    How to debug CSS/Javascript hover issues

    How can I load css file in Meteor for just one page?

    How to select the first, second, or third element with a given class name?

    How do I get user-inputted information from the website directly to my e-mail?

    How to prevent bootstrap css class to override my custom css class

    How to change the active color of the tabs title background using css

    How to Style CSS Checkboxes with Font Awesome

    DIV Background Image Doesn't Show in Firefox or Chrome (But only online). Online it works for IE?

    How to create a mouseover effect on menu links EXCEPT for the current page?

    How to add border between td's in which are in different tr's?

    How to select elements using CSS selector who's attribute can have multiple values

    How can I stop divs getting pushed down?

    How do I apply CSS Transition to my responsive menu?

    how to add border to image css on blogger