Full version: jsB@nk » Image » Draggable objects
URL: https://www.javascriptbank.com/draggable-objects.html
A versatile script that enables any number of elements, such as images, text in a page to be dragable.
Full version: jsB@nk » Image » Draggable objects
URL: https://www.javascriptbank.com/draggable-objects.html
<style>.draggable {CURSOR: hand; POSITION: relative}.showhand {CURSOR: hand; POSITION: relative}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=JavaScript1.2>// ************ Move object functions ************ function initClassdraggable(){bMoving = false;document.onmousedown=startMove;document.onmousemove=moveObj;document.onmouseup=new Function("bMoving=false");}function moveObj(){if(!bMoving) return true;if(event.button!=1) return true;// Reposition the object, keeping the same distance from the cursorob.style.pixelLeft=event.clientX-xdif;ob.style.pixelTop=event.clientY-ydif;return false;}function startMove(){// Only "draggable" objects can moveif(event.srcElement.className!="draggable") return;bMoving=true;// Store the object and the differnce between the obj pos and cursor pos: it must remain the sameob=event.srcElement;xdif=event.clientX-event.srcElement.style.pixelLeft;ydif=event.clientY-event.srcElement.style.pixelTop;}// ************ Button Functions ************ // 2-state button (checkbox): function toggles the 2 statesfunction cpClickState(obj){if(obj.cpType=="2"){obj.cpType="1";obj.src=obj.cpDn;}else{obj.cpType="2";obj.src=obj.cpUp;}}function cpMouseOver(obj, f){obj.src=f;}function cpMouseOut(obj, f){obj.src=f;}// Move/display the object at the specified locationfunction cpPopup(ob2, x, y){ob2.style.posLeft=x;ob2.style.posTop=y;ob2.style.visibility="visible";}// Roll the first object, display the second at the specified locationfunction cpMousePopOver(ob1, f, ob2, x, y){cpMouseOver(ob1, f);cpPopup(ob2, x, y);}// Roll the first object, display the secondfunction cpRollPopOver(ob1, f, ob2){cpMouseOver(ob1, f);ob2.style.visibility="visible";}// Restore the first object, hide the secondfunction cpMousePopOut(ob1, f, ob2){cpMouseOut(ob1, f);ob2.style.visibility="hidden";}// Toggle the object's visibilityfunction cpPop(ob){if(ob.style.visibility=="visible") ob.style.visibility="hidden";else ob.style.visibility="visible";}// ************ Misc functions ************ // Return the random number between min and maxfunction cpRandom(min, max){var nRand = Math.random()*(max-min+1);return(Math.round(nRand + 0.5)+min-1);}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=JavaScript1.2>initClassdraggable();</SCRIPT><IMG class=draggable src="logojs.gif" border=0 name=Part1> <IMG class=draggable src="photo4.jpg" border=0 name=Part2> <IMG class=draggable src="photo1.jpg" border=0 name=Part3> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->