Full version: jsB@nk » Image » Drag and drop with special dragging-effect
URL: https://www.javascriptbank.com/drag-n-drop-with-special-dragging-effect.html
This cross-browser drag'n'drop demonstration adds a nice dragging effect with filters.
Full version: jsB@nk » Image » Drag and drop with special dragging-effect
URL: https://www.javascriptbank.com/drag-n-drop-with-special-dragging-effect.html
<STYLE type=text/css>#picture1 {LEFT: 20px; POSITION: absolute; TOP: 10px}#picture2 {LEFT: 170px; POSITION: absolute; TOP: 10px}#picture3 {LEFT: 290px; POSITION: absolute; TOP: 10px}#picture4 {LEFT: 440px; POSITION: absolute; TOP: 10px}#picture5 {LEFT: 520px; POSITION: absolute; TOP: 10px}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=JavaScript>var isNav, isIEif (parseInt(navigator.appVersion) >= 4) {if (navigator.appName == "Netscape") {isNav = true} else {isIE = true}}function setZIndex(obj, zOrder) {obj.zIndex = zOrder}function shiftTo(obj, x, y) {if (isNav) {obj.moveTo(x,y)} else {obj.filter = "invert()"obj.pixelLeft = xobj.pixelTop = y}}var selectedObjvar offsetX, offsetYfunction setSelectedElem(evt) {if (isNav) {var testObjvar clickX = evt.pageXvar clickY = evt.pageYfor (var i = document.layers.length - 1; i >= 0; i--) {testObj = document.layers[i]if ((clickX > testObj.left) && (clickX < testObj.left + testObj.clip.width) && (clickY > testObj.top) && (clickY < testObj.top + testObj.clip.height)) {selectedObj = testObjsetZIndex(selectedObj, 100)return}}} else {var imgObj = window.event.srcElementif (imgObj.parentElement.id.indexOf("picture") != -1) {selectedObj = imgObj.parentElement.stylesetZIndex(selectedObj,100)return}}selectedObj = nullreturn}function dragIt(evt) {if (selectedObj) {if (isNav) {shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY))} else {shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY))return false}}}function engage(evt) {setSelectedElem(evt)if (selectedObj) {if (isNav) {offsetX = evt.pageX - selectedObj.leftoffsetY = evt.pageY - selectedObj.top} else {offsetX = window.event.offsetXoffsetY = window.event.offsetY}}return false}function release(evt) {if (document.all) {selectedObj.filter = ""}if (selectedObj) {setZIndex(selectedObj, 0)selectedObj = null}}function setNavEventCapture() {if (isNav) {document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)}}function init() {if (isNav) {setNavEventCapture()}document.onmousedown = engagedocument.onmousemove = dragItdocument.onmouseup = release}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onload=init()><DIV id=picture1><IMG name=picturePic1 src="photo2.jpg"></DIV><DIV id=picture2><IMG name=picturePic2 src="photo7.jpg"></DIV><DIV id=picture3><IMG name=picturePic3 src="photo3.jpg"></DIV><DIV id=picture4><IMG name=picturePic4 src="logojs.gif"></DIV><DIV id=picture5><IMG name=picturePic5 src="photo6.jpg"></DIV></BODY><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->