JavaScript Drag and Drop
To begin with we will define the class and methods that will be required.



var drag = {

zindex: 0,

add_element: function(inst)
{

},

drag_init: function(inst, event)
{

},

drag_end: function(inst, event)
{

},

drag_do: function(inst, event)
{

},

event: function(e)
{
return (e == null) ? window.event : e;
}
};



Theres hardly anything to this class, the event function is simply for returning a reference to the event object. drag_do, drag_end and drag_init are all private methods, the only method we need to refer to from outside our class in add_element. Zindex has been added to make sure the element you are dragging is left on top.
To add an element we would do something like:

drag.add_element(document.getElementById("maindiv" ));

which would then make maindiv dragable around the page.

The code that sets up this element is alot like:

[JavaScript]

add_element: function(inst)
{
inst.setAttribute("drag_active", false);
inst.onmousedown = function(e) {
drag.drag_init(this, e);
}
inst.onmouseup = function(e) {
drag.drag_end(this, e);
}
inst.onmousemove = function(e) {
drag.drag_do(this, e);
}
},

[/JavaScript]

which sets up the private methods and attaches them to our object. It also sets an element attribute up of "drag_active" with a value of false. Yes this will indeed have some compliancy issues when validating your javascript against xhtml 1 standards.

Once the user has pressed their mouse button down and held it we must get some additional information before actually performing the drag, this is where drag_init comes into play.

[JavaScript]

drag_init: function(inst, event)
{
event = drag.event(event);
inst.style.position = "absolute";
inst.setAttribute("drag_active", true);
inst.setAttribute("_x", event.clientX - inst.offsetLeft);
inst.setAttribute("_y", event.clientY - inst.offsetTop);
},

[/JavaScript]

First of all we obtain the event object as it has some information we need. We then set the position attribute to "absolute" which will give us the power to move it anywhere on the screen.

Next is getting the mouses co-ordinates as its over the object, this is so we dont have any "snap to" problems when we begin to drag the mouse, I have stored these in two new attributes.

Now we will perform the task of actually moving the object.

[JavaScript]

drag_do: function(inst, event)
{
event = drag.event(event);
var active = inst.getAttribute("drag_active");
if (active == true || active == "true") {
inst.style.left = (event.clientX - inst.getAttribute("_x")) + "px";
inst.style.top = (event.clientY - inst.getAttribute("_y")) + "px";
inst.style.zIndex = ++drag.zindex;
}
},

[/JavaScript]

Notice we check to see whether the drag should be actioned upon or not, they we just set the left and top and also we set the new zindex so we dont have any layering issues.

This is a very basic method which just switches the drag_active to false, we couldnt done this with our drag_init function but for clarity I have kept it separate.

[JavaScript]

drag_end: function(inst, event)
{
inst.setAttribute("drag_active", false);
},

[/JavaScript]

Here is the complete script

[JavaScript]

var drag = {

zindex: 0,

add_element: function(inst)
{
inst.setAttribute("drag_active", false);
inst.onmousedown = function(e) {
drag.drag_init(this, e);
}
inst.onmouseup = function(e) {
drag.drag_end(this, e);
}
inst.onmousemove = function(e) {
drag.drag_do(this, e);
}
},

drag_init: function(inst, event)
{
event = drag.event(event);
inst.style.position = "absolute";
inst.setAttribute("drag_active", true);
inst.setAttribute("_x", event.clientX - inst.offsetLeft);
inst.setAttribute("_y", event.clientY - inst.offsetTop);
},

drag_end: function(inst, event)
{
inst.setAttribute("drag_active", false);
},

drag_do: function(inst, event)
{
event = drag.event(event);
var active = inst.getAttribute("drag_active");
if (active == true || active == "true") {
inst.style.left = (event.clientX - inst.getAttribute("_x")) + "px";
inst.style.top = (event.clientY - inst.getAttribute("_y")) + "px";
inst.style.zIndex = ++drag.zindex;
}
},

event: function(e)
{
return (e == null) ? window.event : e;
}
};

[/JavaScript]


Thanks...
Rajkumar...

Haven't you tried to use Ajax for that? It's really easier.

<style>
<!--
.dragme{position:relative;}
-->
</style>
<script language="JavaScript1.2">
<!--

var ie=document.all;
var nn6=document.getElementById&&!document.all;

var isdrag=false;
var x,y;
var dobj;

function movemouse(e)
{
if (isdrag)
{
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}

function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";

while (fobj.tagName != topelement && fobj.className != "dragme")
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}

if (fobj.className=="dragme")
{
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}

document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");

//-->
</script>

__________________
The KINGMAKER
Makes Every Thing Possible

Stuffs (My Blog)

Example:
function $(v) { return(document.getElementById(v)); }
function agent(v) { return(Math.max(navigator.userAgent.toLowerCase(). indexOf(v),0)); }
function xy(e,v) { return(v?(agent('msie')?event.clientY+document.bod y.scrollTop:e.pageY)agent('msie')?event.clientX+ document.body.scrollTop:e.pageX)); }

function dragOBJ(d,e) {

function drag(e) { if(!stop) { d.style.top=(tX=xy(e,1)+oY-eY+'px'); d.style.left=(tY=xy(e)+oX-eX+'px'); } }

var oX=parseInt(d.style.left),oY=parseInt(d.style.top) ,eX=xy(e),eY=xy(e,1),tX,tY,stop;

document.onmousemove=drag; document.onmouseup=function(){ stop=1; document.onmousemove=''; document.onmouseup=''; };

}

<div style="position: relative; top: 0; left: 0" onmousedown="dragOBJ(this,event); return false;">test</div>

Thanks
Sathian.K

hi,

consider a framed set of windows. Menu items replace the content frame
preserving the menu frame.

One menu item would ideally replace the content frame AND the menu frame
as well, to allow access to a new set of menus,.

Can you have a URL with two targets? or is it down to a javascript
onclick() handler to replace two windows using a hand crafted function?

Thanks
Rajkumar

Hi,

Is is to possible to get data from another tab in IE7 ?

i.e. I've two tabs in my IE7 and I want to get document.location(the
address) of the other tab in the IE...


Thanks

Rajkumar....

<html>
<head>
<style>
img
{
position:relative;
}
</style>
<script type="text/javascript">
mouseover=true;
function coordinates()
{
if (!moveMe)
{
return;
}
if (event.srcElement.id=="moveMe")
{
mouseover=true;
pleft=document.getElementById('moveMe').style.pixe lLeft;
ptop=document.getElementById('moveMe').style.pixel Top;
xcoor=event.clientX;
ycoor=event.clientY;
document.onmousemove=moveImage;
}
}

function moveImage()
{
if (mouseover&&event.button==1)
{
document.getElementById('moveMe').style.pixelLeft= pleft+event.clientX-xcoor;
document.getElementById('moveMe').style.pixelTop=p top+event.clientY-ycoor;
return false;
}
}

function mouseup()
{
mouseover=false;
}
document.onmousedown=coordinates;
document.onmouseup=mouseup;
</script>
</head>
<body>
<img id="moveMe" src="smiley.gif" width="32" height="32"><br />
<b>Drag and drop the image</b>
</body>
</html>