首頁 > 開發者 > JavaScript
上例【JavaScript中使用zDragDrop實現拖放功能】示範了使用zDragDrop庫實現拖放，但是如果不依賴任何庫自行開發出拖放效果的話還是有點麻煩的。這裡先介紹一種通過滑鼠事件實現類比拖放效果的辦法。
1.先看如下效果：
<html><br /> <head><br /> <title>Simulated Drag And Drop Example</title><br /> <script type="text/javascript"></p><p> function handleMouseMove(oEvent) {<br /> var oDiv = document.getElementById("div1");<br /> oDiv.style.left = oEvent.clientX;<br /> oDiv.style.top = oEvent.clientY;<br /> }</p><p> </script><br /> <style type="text/css"><br /> #div1 {<br /> background-color: red;<br /> height: 100px;<br /> width: 100px;<br /> position: absolute;<br /> }<br /> </style><br /> </head><br /> <body onmousemove="handleMouseMove(event)"><br /> <p>Try moving your mouse around.</p><br /> <p><div id="div1"></div> </p><br /> </body><br /></html>
這個僅僅實現了div跟隨滑鼠移動的效果。
再看下面的例子：
<html><br /> <head><br /> <title>Simulated Drag And Drop Example</title><br /> <script type="text/javascript" src="eventutil.js"></script><br /> <script type="text/javascript"></p><p> function handleMouseMove() {<br /> var oEvent = EventUtil.getEvent();<br /> var oDiv = document.getElementById("div1");<br /> oDiv.style.left = oEvent.clientX;<br /> oDiv.style.top = oEvent.clientY;<br /> }</p><p> function handleMouseDown() {<br /> EventUtil.addEventHandler(document.body, "mousemove", handleMouseMove);<br /> EventUtil.addEventHandler(document.body, "mouseup", handleMouseUp);<br /> }</p><p> function handleMouseUp() {<br /> EventUtil.removeEventHandler(document.body, "mousemove", handleMouseMove);<br /> EventUtil.removeEventHandler(document.body, "mouseup", handleMouseUp);<br /> }</p><p> </script><br /> <style type="text/css"><br /> #div1 {<br /> background-color: red;<br /> height: 100px;<br /> width: 100px;<br /> position: absolute;<br /> }<br /> </style><br /> </head><br /> <body><br /> <p>Try dragging the red square.</p><br /> <p><div id="div1" onmousedown="handleMouseDown()"></div> </p><br /> </body><br /></html>
運行時發現Div左上方總與滑鼠指標對齊。最佳化一下先：
<html><br /> <head><br /> <title>Simulated Drag And Drop Example</title><br /> <script type="text/javascript" src="eventutil.js"></script><br /> <script type="text/javascript"></p><p> var iDiffX = 0;<br /> var iDiffY = 0;</p><p> function handleMouseMove() {<br /> var oEvent = EventUtil.getEvent();<br /> var oDiv = document.getElementById("div1");<br /> oDiv.style.left = oEvent.clientX - iDiffX;<br /> oDiv.style.top = oEvent.clientY - iDiffY;<br /> }</p><p> function handleMouseDown() {<br /> var oEvent = EventUtil.getEvent();<br /> var oDiv = document.getElementById("div1");<br /> iDiffX = oEvent.clientX - oDiv.offsetLeft;<br /> iDiffY = oEvent.clientY - oDiv.offsetTop;</p><p> EventUtil.addEventHandler(document.body, "mousemove", handleMouseMove);<br /> EventUtil.addEventHandler(document.body, "mouseup", handleMouseUp);<br /> }</p><p> function handleMouseUp() {<br /> EventUtil.removeEventHandler(document.body, "mousemove", handleMouseMove);<br /> EventUtil.removeEventHandler(document.body, "mouseup", handleMouseUp);<br /> }</p><p> </script><br /> <style type="text/css"><br /> #div1 {<br /> background-color: red;<br /> height: 100px;<br /> width: 100px;<br /> position: absolute;<br /> }<br /> </style><br /> </head><br /> <body><br /> <p>Try dragging the red square.</p><br /> <p><div id="div1" onmousedown="handleMouseDown(event)"></div> </p><br /> </body><br /></html>
這樣感覺舒坦一點了。哈哈。
基於以上方法就可以類比出拖放效果了。請看代碼示範：
<html><br /> <head><br /> <title>Simulated Drag And Drop Example</title><br /> <script type="text/javascript" src="eventutil.js"></script><br /> <script type="text/javascript"></p><p> var iDiffX = 0;<br /> var iDiffY = 0;</p><p> function handleMouseMove() {<br /> var oEvent = EventUtil.getEvent();<br /> var oDiv = document.getElementById("div1");<br /> oDiv.style.left = oEvent.clientX - iDiffX;<br /> oDiv.style.top = oEvent.clientY - iDiffY;<br /> }</p><p> function handleMouseDown() {<br /> var oEvent = EventUtil.getEvent();<br /> var oDiv = document.getElementById("div1");<br /> iDiffX = oEvent.clientX - oDiv.offsetLeft;<br /> iDiffY = oEvent.clientY - oDiv.offsetTop;</p><p> EventUtil.addEventHandler(document.body, "mousemove", handleMouseMove);<br /> EventUtil.addEventHandler(document.body, "mouseup", handleMouseUp);<br /> }</p><p> function handleMouseUp() {<br /> var oEvent = EventUtil.getEvent();<br /> EventUtil.removeEventHandler(document.body, "mousemove", handleMouseMove);<br /> EventUtil.removeEventHandler(document.body, "mouseup", handleMouseUp);</p><p> if (isOverDropTarget(oEvent.clientX,oEvent.clientY)) {<br /> alert("dropped!");<br /> var oDiv = document.getElementById("div1");<br /> var oTarget = document.getElementById("divDropTarget");<br /> oDiv.style.left = oTarget.offsetLeft;<br /> oDiv.style.top = oTarget.offsetTop;<br /> }<br /> }</p><p> function isOverDropTarget(iX, iY) {<br /> var oTarget = document.getElementById("divDropTarget");<br /> var iX1 = oTarget.offsetLeft;<br /> var iX2 = iX1 + oTarget.offsetWidth;<br /> var iY1 = oTarget.offsetTop;<br /> var iY2 = iY1 + oTarget.offsetHeight;</p><p> return (iX >= iX1 && iX <= iX2 && iY >= iY1 && iY <= iY2);<br /> }</p><p> </script><br /> <style type="text/css"><br /> #div1 {<br /> background-color: red;<br /> height: 100px;<br /> width: 100px;<br /> position: absolute;<br /> z-index: 10;<br /> }</p><p> #divDropTarget {<br /> background-color: blue;<br /> height: 200px;<br /> width: 200px;<br /> position: absolute;<br /> left: 300px;<br /> }<br /> </style><br /> </head><br /> <body><br /> <p>Try dragging the red square onto the blue square.</p><br /> <div id="div1" onmousedown="handleMouseDown(event)"></div><br /> <div id="divDropTarget"></div><br /> </body><br /></html>
注意，上面用的js庫eventutil.js代碼：
var EventUtil = new Object;<br />EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) {<br /> if (oTarget.addEventListener) {<br /> oTarget.addEventListener(sEventType, fnHandler, false);<br /> } else if (oTarget.attachEvent) {<br /> oTarget.attachEvent("on" + sEventType, fnHandler);<br /> } else {<br /> oTarget["on" + sEventType] = fnHandler;<br /> }<br />};</p><p>EventUtil.removeEventHandler = function (oTarget, sEventType, fnHandler) {<br /> if (oTarget.removeEventListener) {<br /> oTarget.removeEventListener(sEventType, fnHandler, false);<br /> } else if (oTarget.detachEvent) {<br /> oTarget.detachEvent("on" + sEventType, fnHandler);<br /> } else {<br /> oTarget["on" + sEventType] = null;<br /> }<br />};</p><p>EventUtil.formatEvent = function (oEvent) {</p><p> if (typeof oEvent.charCode == "undefined") {<br /> oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;<br /> oEvent.isChar = (oEvent.charCode > 0);<br /> }</p><p> if (oEvent.srcElement && !oEvent.target) {<br /> oEvent.eventPhase = 2;<br /> oEvent.pageX = oEvent.clientX + document.body.scrollLeft;<br /> oEvent.pageY = oEvent.clientY + document.body.scrollTop;</p><p> if (!oEvent.preventDefault) {<br /> oEvent.preventDefault = function () {<br /> this.returnValue = false;<br /> };<br /> }</p><p> if (oEvent.type == "mouseout") {<br /> oEvent.relatedTarget = oEvent.toElement;<br /> } else if (oEvent.type == "mouseover") {<br /> oEvent.relatedTarget = oEvent.fromElement;<br /> }</p><p> if (!oEvent.stopPropagation) {<br /> oEvent.stopPropagation = function () {<br /> this.cancelBubble = true;<br /> };<br /> }</p><p> oEvent.target = oEvent.srcElement;<br /> oEvent.time = (new Date).getTime();</p><p> }</p><p> return oEvent;<br />};</p><p>EventUtil.getEvent = function() {<br /> if (window.event) {<br /> return this.formatEvent(window.event);<br /> } else {<br /> return EventUtil.getEvent.caller.arguments[0];<br /> }<br />};
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
