How to Make an HTML Object Movable using Behaviors

• Download source - 1.25 KB

Introduction

Some time ago, I was confronted with a bit of a problem: I had to make some simple HTML components movable on Web pages. Those Web pages were part of a bigger intranet solution distributed to customers running Windows environment with Microsoft Internet Explorer 6 or newer installed. Implementing this feature as a behavior was a direct possibility since all customers where having Internet Explorer preinstalled. Soon I discovered that while it is relatively easy to make an object movable, it can be a bit more tricky to make it overlap an object especially if you are trying to overlap something like a dropdown box… I have spent hours on the Internet trying to find a solution. I could see that many other people were having a similar problem but nobody could come up with a more or less acceptable solution. Amongst others, some were suggesting rewriting the dropdown box using DIV tags, some were suggesting making dropdown box invisible while moving objects above it. None of those suggestions suited my needs. So I had to figure out a solution on my own. And it seems to me that I have found one. It is described in the article below. It is up to you to judge whether it is good or not, but I am using it a lot and I am pretty happy about it.

Behaviors

Behaviors is quite a significant feature that was introduced in Microsoft Internet Explorer 5.5. Dynamic HTML (DHTML) behaviors are components that encapsulate specific functionality or behavior on a page. When applied to a standard HTML element on a page, a behavior enhances that element's default behavior. An element behavior enables you to add a custom element to pages. You can find more general information about behaviors at Microsoft's Web site here. Microsoft's Web site also provides us with an example of movable behavior.

Implementing Behavior

I started out using the above-mentioned Microsoft behavior. It introduced me to some basic functionality. Some of it was good, some was unnecessary for me so I ended up rewriting it almost from scratch. Here you can see the minimal behavior needed to make an object movable:

<attach   event="onmouseup"       handler="DoMouseUp"   />
<attach   event="onmousedown"     handler="DoMouseDown" />

<script language="jscript">
var iOffsetX; 
var iOffsetY;

function DoMouseDown()
{
    setCapture();
    iOffsetX = window.event.x - element.style.pixelLeft;
    iOffsetY = window.event.y - element.style.pixelTop;
    attachEvent ("onmousemove", DoMouseMove);
}    

function DoMouseMove()
{
    var iLeft = window.event.x - iOffsetX;
    var iTop = window.event.y - iOffsetY;
    style.left = iLeft;
    style.top = iTop;
}

function DoMouseUp()
{
    detachEvent ("onmousemove", DoMouseMove);
    releaseCapture();
}
</script>

This behavior can be initiated by static HTML code like this:

<div id="movableDiv" style="position: absolute; 
        width: 100px; height: 100px; background-color: Blue;
    cursor: move; behavior: url(movable.htc); left: 100px; top: 100px;">
    Movable DIV
</div>

Or dynamically by using JavaScript like this:

document.getElementById("movableDiv").style.behavior = "url(movable.htc)";

Let us now see how it works. First we will make a simple Web page like this:

If we will just move elements, then it is not necessary that we will get the desired behavior...

But by adjusting the z-index, we might fix this problem:

Let us now add some SELECT objects and see what will happen then:

Well, not exactly what we wanted...

And finally, here is the ultimate solution: we add underlying IFRAME object to our DIV tag:

<attach event="onmouseup" handler="DoMouseUp" />
<attach event="onmousedown" handler="DoMouseDown" />
<attach event="ondocumentready" handler="SetDefaults" />

<script language="jscript">
var iOffsetX; 
var iOffsetY;
var IFrElm;

var pDoc = document.parentWindow.document;

function SetDefaults()
{
   IFrElm = makeIFrame();
}

function DoMouseDown()
{
    if (IFrElm == null)
        IFrElm = makeIFrame();

    setCapture();
   
    iOffsetX = window.event.x - element.style.pixelLeft;
    iOffsetY = window.event.y - element.style.pixelTop;
    attachEvent ("onmousemove", DoMouseMove);
}    

function DoMouseMove()
{
    var iLeft = window.event.x - iOffsetX;
    var iTop = window.event.y - iOffsetY;
    style.left = iLeft;
    style.top = iTop;

    IFrElm.style.left = iLeft;
    IFrElm.style.top = iTop;
}

function DoMouseUp()
{
    detachEvent ("onmousemove", DoMouseMove);
    releaseCapture();
}

function makeIFrame()
{
    var obj = pDoc.createElement('IFrame');

    obj.style.position = 'absolute';
    obj.style.left = offsetLeft;
    obj.style.top = offsetTop;
    obj.style.height = offsetHeight;
    obj.style.width = offsetWidth;
    obj.style.zIndex = style.zIndex - 1;

    return pDoc.body.appendChild(obj);
}
</script>

History

• 9^th September, 2007: Initial post to The Code Project

You can always find the most up-to-date version of this article in the JavaScript / DHTML section of my Web site.