鼠标拖动图片至恣意位置，JS图片拖放结果

发布时间：2018-08-14 05:56:03 所属栏目：编程来源：站长网

导读：鼠标拖动图片至恣意位置，JS图片拖放结果。通过下边的代码演示可以看到：页面中的这两张图片可以用鼠标拖动的，在页面装入的时辰初始化变乱捕捉进程，通过这个代码你或者会学会以不少对象，出格是拖动工具的处理赏罚。演示： htmlheadstyle type=text/css#ver

　　鼠标拖动图片至恣意位置，JS图片拖放结果。通过下边的代码演示可以看到：页面中的这两张图片可以用鼠标拖动的，在页面装入的时辰初始化变乱捕捉进程，通过这个代码你或者会学会以不少对象，出格是拖动工具的处理赏罚。

　　演示：

<html> <head> <style type="text/css"> #veryhuo1{position:absolute; left:90; top:70; width:121; z-index:0} #veryhuo2{position:absolute; left:250; top:250; width:118; z-index:0} </style> <title>可以拖动的图片</title> </head> <body onLoad="init()"> <SCRIPT LANGUAGE="<b>Java</b>Script"> var isNav, isIE //检测赏识器版本 if (parseInt(navigator.appVersion) >= 4) { if (navigator.appName == "Netscape") { isNav = true } else { isIE = true } } //设定工具z-Index属性的适用函数 function setZIndex(obj, zOrder) { obj.zIndex = zOrder } //这个函数将指定物体定位到指定坐标处。 function shiftTo(obj, x, y) { if (isNav) { obj.moveTo(x,y) } else { obj.pixelLeft = x obj.pixelTop = y } } var selectedObj var offsetX, offsetY //探求被点击的工具 function setSelectedElem(evt) { if (isNav) { //NS赏识器的处理赏罚 var testObj var clickX = evt.pageX var clickY = evt.pageY for (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 = testObj //则记录这个工具 setZIndex(selectedObj, 100)//将其置于最前 return //返回 } } } else { //<b>IE赏识器</b>的处理赏罚 var imgObj = window.event.srcElement //触发变乱的工具 if (imgObj.parentElement.id.indexOf("veryhuo") != -1) {//判定这个工具是不是预先界说必要被拖动的谁人 selectedObj = imgObj.parentElement.style//记录这个工具 setZIndex(selectedObj,100)//将其调解到最上层 return //返回 } } //假如点击的工具不是必要拖动的，则会执行到这里 selectedObj = null //记录一个空工具 return } //拖动一个工具 function dragIt(evt) { if (selectedObj) { //假若有被操纵工具 if (isNav) { //假如赏识器是NS shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY)) //将工具移动到鼠标的位置 } else { //假如是IE shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY)) return false //返回false值，阻止接下来的其他处理赏罚点击的进程。 } } } //鼠标按下时的处理赏罚 function engage(evt) { /*记录鼠标坐标*/ setSelectedElem(evt) if (selectedObj) { if (isNav) { offsetX = evt.pageX - selectedObj.left offsetY = evt.pageY - selectedObj.top } else { offsetX = window.event.offsetX offsetY = window.event.offsetY } } return false } //处理赏罚鼠标开释 function release(evt) { if (selectedObj) { setZIndex(selectedObj, 0) //将被拖动工具置后 selectedObj = null //破除记录的工具 } } //为NS设定变乱捕捉列表 function setNavEventCapture() { if (isNav) { document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP) } } //在页面装入的时辰初始化变乱捕捉进程 function init() { if (isNav) { setNavEventCapture() } document.onmousedown = engage document.onmousemove = dragIt document.onmouseup = release } </SCRIPT> <DIV ID=veryhuo1><IMG NAME="planePic1" SRC="/images/logo.gif" BORDER=0></DIV> <DIV ID=veryhuo2><IMG NAME="planePic1" SRC="/images/logo.gif" BORDER=0></DIV> <p><b>页面中的这张图片可以用鼠标拖动。</b></p> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys