Is there a way to ensure that when dragging an item in IE7 using CSS and jQuery, the dragged item remains on top whether it is dragged up or down?

Check out my jsfiddle code here: http://jsfiddle.net/SMqR9/16/

In IE7, there seems to be a z-index issue when dragging items. When moving an item up, it remains visible until placed. However, when dragging an item down, it appears to have a lower z-index than desired drop targets.

Any suggestions on how to fix this?

Answer №1

For some reason, none of the fiddles I created are working in my IE9 anymore, not even those that worked before. Since the last revision (26) works in Opera, Chrome, and FF, as well as Compatibility Mode of IE and IE7, I have to assume it is related to either my IE or JSFiddle and should be functioning correctly.

http://jsfiddle.net/SMqR9/26/

I believe it finally works now.

When MouseDown increases .closest('.section')'s z-index to 5000. When MouseUp lowers it to 1000.

The numbers are chosen randomly, so there's no need to set it that high. Just ensure to lower it to a value below your other z-index values.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AJAX function failing to trigger for the second time

I'm currently facing an issue with my JQuery AJAX function. It's supposed to populate a dropdown in a partial view based on the user's selection from another dropdown menu. The first part of the function is working as expected but the secon ...

The Javascript and CSS code for a button fails to trigger the animation function after the initial click

Is it possible to trigger the animation function multiple times after the initial click without making changes to the HTML code? The ID and class in the code must remain as they are. I attempted to use the display property set to none, but it did not yie ...

CSS: Specify child element to have a full width of 100%, but appear only 50% wide

Looking at this page, it seems that the header photo is not displaying full width. #wrap { width: 990px; } #content-wrap { display: flex; } .image-header { display: block; width: 100%; } .image-header img { width: 100%; height: auto; } .cont ...

Unable to dismiss a Popup Dialog Box using Selenium Webdriver in Python(Element is not visible at the moment and cannot be interacted with)

I am facing difficulty closing a jQuery dialog box using Selenium Webdriver. See my code below. I am currently using Selenium WebDriver version 2.44.0 and Firefox version 33. Any suggestions would be greatly appreciated. from selenium import webdriver fro ...

Modify text input when a different option is selected (with both options originally coming from a database)

A dropdown menu is filled with options from a database, and the chosen option is compared to a variable $comp_cntry currently on the page: <select name="country"> <option value="--" disabled>Please Select...</option> <option v ...

Upon changing the content to a button, the button appears to be unresponsive to Jquery functionalities

Having some trouble when I switch the content of the div td tag to an a tag, the link does not work after being clicked, same issue with input tags. Here is the td tag: <td class='column2' id='e" . $row["id"] . "&a ...

The Simple HTML Dom parser is failing to parse contents on these specific websites

I tried using a basic HTML DOM parser but it's encountering issues when parsing certain websites. include_once 'simple_html_dom.php'; $html=file_get_html('http://www.lapenderiedechloe.com/'); This results in an error message like ...

Prevent users from copying and pasting text or right-clicking on the website

I have been struggling to completely disable the ability for users to copy and paste or select text on my website across all devices. After much searching, I came across a solution that I implemented on my site. Below the <body> tag, I inserted the ...

The Bootstrap navigation bar fails to expand

After extensive searching, I still can't figure out why my bootstrap menu isn't opening as expected. I made sure to link JQuery first to try to resolve the issue, but it doesn't seem to have made any difference. I'm starting to wonder ...

Harmonize the timing of three ajax requests

Is there a way to simultaneously display data from three AJAX requests that are fired one after another? I want to echo back all the data at the same time. $.ajax ({ type: "POST", url: "page1.php", data: "var1=" + var1, suc ...

Tips for maintaining the full width of an image within the viewport while also preserving a fixed aspect ratio of 16:9

After extensive research on the topic, I find the solution to implementing a parallax effect using GSscrolltrigger a bit complex. This is mainly because I need to dynamically adjust the height of the parent div based on @media CSS, while ensuring that the ...

Update the image source within a CSS element

I'm facing an issue with changing the source image of an Element. The situation is that I have a customized CSS script and I need to modify a logo image. Below, you can find the source code: https://i.stack.imgur.com/8HLCE.png The problem lies in at ...

Does the entire window fade before the URL is loaded?

Is it feasible for me to create an effect where, upon a user clicking on a link, the entire window fades out (perhaps with a black div covering it), and then loads an external URL like 'google'? For example: User clicks 'Here', and th ...

What is the significance of declaring a variable outside of a JavaScript function? (Regarding jQuery and #anchor)

In my jQuery function, I needed to determine the current #anchor of the page. To achieve this, I utilized the jQuery URL Parser plugin. $.fn.vtabs = function() { alert("The current anchor is "+$.url.attr('anchor')); } Initially, the code c ...

In Angular, when a component is clicked, it is selecting entire arrays instead of just a single item at a

I am currently working on implementing a rating feature using Angular. This component will be used to rate different languages based on how proficient I am with them. My issue lies in the fact that when I click on one array element, it automatically selec ...

Position a div in the center of a section

Having trouble centering a <div> within a <section>? I've tried setting margin-left and margin-right to auto without success. Any other suggestions? Check out the jsFiddle illustrating the issue: http://jsfiddle.net/veWKh/ ...

Pass data as json from javascript to php

After users perform actions on a page and click "next," the goal is to redirect them to a PHP file named "Step2.php" along with specific JSON data. The constructed JSON string is as follows: [{"name":"IMG_20130726_182336.jpg","size":2280709,"type":"image ...

What could be causing my database to not retrieve data from the bootstrap modal form?

I seem to be encountering some bugs here. The data I inputted into this modal is not being received by my database. Additionally, when I attempt to submit the data in the modal, the modal does not close as expected. ...

What is the best way to adjust Material UI Grid properties according to the screen size?

I am working with Material UI and have a grid on the homepage that needs to maintain certain properties regardless of screen size. However, I want to apply a negative margin when the screen reaches 1200px or larger (lg). Currently, the grid is set up like ...

Create two floating divs that adjust their height dynamically to be equal

Situation: I have a container with two direct children, known as "left" and "right". The height of the "left" child should never exceed the height of the "right" child. However, the "right" child can extend beyond the height of the "left" child. I am stru ...