Guyz Im posting some drag and drop totorial If you like it or have any problems reply me First thing's first, The CSS... This will set the cursor to pointer which is the hand one, next in order to move an element you must first set the CSS position property, in order to do that and maintain an element's normal position we set it to relative. Now comes the script... We will start out with declaring the global variables... mousedown - will detect whether the mouse is being pressed. obj - will determine the current object omx - stands for Old Mouse X position omy - stands for Old Mouse Y position oox - Old Object X position ooy - Old Object Y position These will be used durring the execution of the script. This function will allow the other functions to return the event object in use to allow Mozilla/Netscape to be able to use this script, because Internet Explorer/Opera's event.srcElement won't work with FireFox, this has to be done in a special way. Then there's this function... This function works in conjunction with getEvent(e) in order to return the target element for FireFox. Now we handle the event driven part of this script... In order for Mozilla/Netscape to grab the event object from an event is to use the first argument to the event and use it in conjuntion with getEvent(e), the argument "e" in that function will allow you to gain access to the event. Then we use that event object to gain the source object for which the event is being triggered in and test if it's class attribute is set to "dragdrop". If so then we set mousedown to true to allow the mousemove event to realize whether to drag an object, and what to drag specifically. Ofcourse we need to set the old mouse and object positions in order to be able to properly drag this object while it stays consistant position wise with the cursor. Now, in FireFox the CSS properties pixelLeft/pixelTop will not work, so we have to use left/top instead, which requires some browser detection. Add To Favorites #1 Posted 05-25-07, 09:40 PM First thing's first, The CSS... Code: <style type="text/css"> .dragdrop{ position:relative; cursorointer; } </style> This will set the cursor to pointer which is the hand one, next in order to move an element you must first set the CSS position property, in order to do that and maintain an element's normal position we set it to relative. Now comes the script... We will start out with declaring the global variables... Code: var mousedown=false; var obj=null; var omx=0; var omy=0; var oox=0; var ooy=0; mousedown - will detect whether the mouse is being pressed. obj - will determine the current object omx - stands for Old Mouse X position omy - stands for Old Mouse Y position oox - Old Object X position ooy - Old Object Y position These will be used durring the execution of the script. Code: function getEvent(e){ if(!e){e=event;} return e; } This function will allow the other functions to return the event object in use to allow Mozilla/Netscape to be able to use this script, because Internet Explorer/Opera's event.srcElement won't work with FireFox, this has to be done in a special way. Then there's this function... Code: function getObj(e){ e=getEvent(e); if(navigator.appName.indexOf("Netscape")!==-1){ return e.target; } else{ return e.srcElement; } } This function works in conjunction with getEvent(e) in order to return the target element for FireFox. -------------------------------------------------------------------------------- Now we handle the event driven part of this script... In order for Mozilla/Netscape to grab the event object from an event is to use the first argument to the event and use it in conjuntion with getEvent(e), the argument "e" in that function will allow you to gain access to the event. Then we use that event object to gain the source object for which the event is being triggered in and test if it's class attribute is set to "dragdrop". If so then we set mousedown to true to allow the mousemove event to realize whether to drag an object, and what to drag specifically. Ofcourse we need to set the old mouse and object positions in order to be able to properly drag this object while it stays consistant position wise with the cursor. Now, in FireFox the CSS properties pixelLeft/pixelTop will not work, so we have to use left/top instead, which requires some browser detection. Code: document.onmousedown=function(e){ e=getEvent(e); obj=getObj(e); if(obj.className!=="dragdrop"){ obj=null; } else{ mousedown=true; omx=e.clientX; omy=e.clientY; if(navigator.appName.indexOf("Mozilla")!==-1||navigator.appName.indexOf("Netscape")!==-1){ oox=obj.style.left; ooy=obj.style.top; } else{ oox=obj.style.pixelLeft; ooy=obj.style.pixelTop; } } } Now we sent the data we aquired from the mouse down event and send it here.... What we're doing here is gaining our event and source objects the same way we did before... FireFox being as proper as it is likes to add "px" to our object positioning if no default measurement is specified, so what I've decided to do is simply solve this problem by means of regular expression replacement, we're gonna start by replacing "px" with nothing, which gives us a number, but that number is in string form which will not add/subtract/or any other mathematical equasion with anything else, so by multiplying it by 1 we can trick the javascript interpretter into thinking it's a number. Then we reset the object's position by adding the old object x/y positions to the current mouse x/y positions then subtracting them by the old mouse x/y positions accordingly. if the global variable mousedown is true then it will tell this event to move the object with the mouse cursor, go wherever it goes and maintain it's relative position to where inside the object the mouse cursor was when it was first clicked. This function ends it all, when the user lets go of the left mouse key it sets the global vaiables obj to null and mousedown to false, which will prevent anything from moving after the mouse button has been released. All you have to do now is add this code in between the <head></head> tags and set any element's class attribute to "dragdrop" and you'll be all set from there.