Tutorials

//idea is simple: init an elemnet on mouseclick,on mouse move chnage the
coordinates of the element as the mouse coordinates//

//we have to calculate the mouse coordinates also//
//try the code below//

//create a div element and give a style element with name 'drag_object' //

window.onload=function()

{ document.onmousedown=startDrag; document.onmouseup=stopDrag;

}

var g_ms_x; var g_ms_y;
var glob_win_x,glob_win_y;
function mousePosMx(evt)
{ var img_x; var img_y;
var x,y; var max_x,max_y;
if(evt.pageX) { x = evt.pageX; y = evt.pageY;
} else
{ x = evt.clientX+document.body.scrollLeft+document.documentElement.scrollLeft; y = evt.clientY+document.body.scrollTop+document.documentElement.scrollTop; }
g_ms_x = x; g_ms_y = y;
if(document.body.clientHeight)
{ glob_win_y = document.body.clientHeight; glob_win_x = document.body.clientWidth; } } var dragObject=null; var act_left; var act_top; var left_1; var top_1; var g_ms_xx,g_ms_yy; var diff_l,diff_t; function startDrag(evt) { if(!evt) { evt = window.event; } var targ=evt.target?evt.target:evt.srcElement; if(targ.className=="drag_object") { dragObject=targ.getAttribute('id'); var left = document.getElementById(dragObject).style.left; var top = document.getElementById(dragObject).style.top; var len = left.length; left_1 = left.substr(0,len-2); var len = top.length; top_1 = top.substr(0,len-2); mousePosMx(evt); g_ms_xx=g_ms_x; g_ms_yy=g_ms_y; diff_l = g_ms_xx-left_1; diff_t = g_ms_yy-top_1; document.onmousemove = dragDiv; } } function stopDrag() { dragObject=null; } function dragDiv(evt) { if(!evt) { evt=window.event; } mousePosMx(evt); if(dragObject) { act_left=g_ms_x-diff_l; act_top=g_ms_y-diff_t; var obj_w = document.getElementById(dragObject).style.width; var mns = obj_w.length; var exc_w = obj_w.substr(0,mns-2); if(Number(exc_w)+Number(act_left)+Number(20)>glob_win_x) { dragObject=null; } else { document.getElementById(dragObject).style.left=act_left+'px'; document.getElementById(dragObject).style.top=act_top+'px'; var left = document.getElementById(dragObject).style.left; var top = document.getElementById(dragObject).style.top; var len = left.length; left_1 = left.substr(0,len-2); var len = top.length; top_1 = top.substr(0,len-2); } } }