[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 722
  • Last Modified:

Background redraw problem when moving HTML elements


I want to setup an interface with dragable 'windowlike' div layers.
If the object is dragged the onmousemove event changes the style.left and the style.top properties of the div element.

All goes well except for the fact that internet explorer continuesly redraws (and reloads!) the background image of any html element that is moved.
This is very annoying as it renders the drag-effect quite useless.
If the element has no background image, all goes well.
Also on browsers like Mozilla/firefox or opera this behaviour does not occor.

I've put up an example on  http://www.steffest.com/dragtest.htm
The box on the left has no background image and displays well while dragging
The box on the right has a background image and flickers badly while dragging in internet explorer.

Anyone an idea how to prevent those background image redraws?

1 Solution
Maybe its me this morning, but I can't get either one of them to drag at all!!
SteffestAuthor Commented:
Lucky it's early afternoon here :-)

You can drag the boxes with the blue title bar, not with the windowcontent itself.
Should work on all modern browsers, if not, what browser are you using ?

If you notice, not all of the images are redrawn...

When you have the img as a separate element within the row, it is not redrawn, and is correctly moved ( without redraw )...

The solution ( which you probably wont like ) is to not use background images, and instead, only use img elements within the row:

ie ... <td><img src=...></img></td>

and NOT

      <td background="...."></td>

-- Aaron

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now