Background redraw problem when moving HTML elements

Posted on 2004-11-23
Last Modified: 2006-11-17

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 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
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?

Question by:Steffest
    LVL 3

    Expert Comment

    Maybe its me this morning, but I can't get either one of them to drag at all!!
    LVL 1

    Author Comment

    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 ?

    LVL 8

    Accepted Solution

    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

    6 Surprising Benefits of Threat Intelligence

    All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

    Join & Write a Comment

    This article shows how to read a single webpage's HTML into a string variable, and it also shows how to automate a sequence so you can read and process a list of webpages.  I was tasked with reading and parsing a series of webpages to collect some s…
    This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    26 Experts available now in Live!

    Get 1:1 Help Now