Click here to Skip to main content
Click here to Skip to main content

How to Make an HTML Object Movable using Behaviors

, 9 Sep 2007 CPOL
Rate this:
Please Sign up or sign in to vote.
This article describes how to make an HTML object movable using behaviors. It covers problems connected to showing simple HTML objects above input objects such as select object or an ActiveX component
Screenshot - movable_behavior_IFrame.gif

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:

movable behavior

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

movable behavior

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

movable behavior

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

movable behavior

Well, not exactly what we wanted...

movable behavior

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>

movable behavior

History

  • 9th 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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

semenoff
Software Developer (Senior) Kraftvaerk a/s
Denmark Denmark
I graduated from Saint Petersburg Electrotechnical University, Russia in 1997 with specialty in Microelectronics.
 
I always had a grate deal of interest for programming. Through years of working first as a software developer in cowex a/s - Industrial Automation company and later as a Senior Consultant in Kraftavaerk a/s I achieved a lot of experiences with Delphi, VB, JavaScript and SQL.
 
Since 2006, I started paying more attention to .Net technologies and especially C# programming language.
 
More information about me and my projects is available at my .Net programming web site

Comments and Discussions

 
GeneralThank you, thank you! PinmemberPhilip Liebscher6-Nov-08 9:44 
GeneralRe: Thank you, thank you! Pinmembersemenoff12-Dec-08 7:29 
QuestionTransparency? PinmemberDunkelheit11-May-08 7:28 
Questionhi, can make the div resizable using this method? PinmemberBlueLoveCyn30-Oct-07 18:22 
AnswerRe: hi, can make the div resizable using this method? Pinmembersemenoff31-Oct-07 8:48 
Generalnice job but.. Pinmemberjohn_qa6-Oct-07 10:14 
AnswerRe: nice job but.. Pinmembersemenoff6-Oct-07 10:23 
GeneralRe: nice job but.. Pinmemberjohn_qa6-Oct-07 10:43 
AnswerRe: nice job but.. Pinmembersemenoff6-Oct-07 11:08 
GeneralRe: nice job but.. Pinmemberjohn_qa6-Oct-07 19:13 
AnswerRe: nice job but.. Pinmembersemenoff6-Oct-07 19:41 
GeneralCool job, but problems found. PinmemberBlueLoveCyn12-Sep-07 16:11 
AnswerRe: Cool job, but problems found. Pinmembersemenoff13-Sep-07 8:39 
GeneralRe: Cool job, but problems found. PinmemberBlueLoveCyn13-Sep-07 15:37 
AnswerRe: Cool job, but problems found. Pinmembersemenoff14-Sep-07 9:46 
GeneralRe: Cool job, but problems found. PinmemberBlueLoveCyn14-Sep-07 16:55 
GeneralCross browser compatible behaviors PinmemberMatthias Hertel12-Sep-07 4:14 
I personally love behaviors because they solve the problem of adding functionality to HTML elements. You can find a Cross Browser compatible implementation on my site.
There is a Step-by-step sample here:
http://www.mathertel.de/AJAXEngine/S05_JSB/default.aspx
and a bunch of behaviors for for effects like moving you can find there:
http://www.mathertel.de/AJAXEngine/S04_VisualEffects/Default.aspx

Questiondoesn't work with FireFox! Pinmemberbarbod_blue11-Sep-07 1:55 
AnswerRe: doesn't work with FireFox! Pinmembersemenoff11-Sep-07 6:41 
GeneralRe: doesn't work with FireFox! PinmemberBlueLoveCyn13-Sep-07 15:39 
AnswerRe: doesn't work with FireFox! Pinmemberazamsharp16-Sep-07 8:39 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.141015.1 | Last Updated 9 Sep 2007
Article Copyright 2007 by semenoff
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid