用 JavaScript 實現滑鼠拖拽網頁表單 ﹙四﹚

Pulling It All Together

　　最後我們擁有了所有的 drag/drop 的腳本片斷！下一個事情是我們將創建一個 DOM 處理。如果你不是很熟悉，請先閱讀我的 JavaScript Primer on DOM Manipulation。

　　下面的代碼將創建 container(容器)，而且使任何一個需要 drag/dro p的 item 變成一個容器的 item。代碼在這個文章第二個 demo 的後面，它可以用戶記錄一個 list(清單)，定為一個導航窗口在左邊或者右邊，或者更多的函數你可以想到的。

　　下一步我們將透過 "假代碼" 讓 reader 看到真代碼，下面為推薦︰

　　1、當document第一次載入時，創建 dragHelper DIV.dragHelper 將給移動的 item 加陰影。真實的 item 沒有被 dragged，只是用了 insertBefor 和 appendChild 來移動了，我們隱藏了 dragHelper。

　　2、有了 mouseDown 與 mouseUp 函數。所有的操作會對應到當到 iMouseDown 的狀態中，只有當 mouse 左鍵為按下時 iMouseDown 才為真，否則為假。

　　3、我們創建了全局變量 DragDrops 與全局函數 CreateDragContainer.DragDrops 包含了一系列相對彼此的容器。任何參數 (containers) 將透過 CreatedcragContainer 進行重組與序列化，這樣可以自由的移動。CreateDragContainer 函數也將 item 進行綁定與設定屬性。

　　4、現在我們的代碼知道每個 item 的加入，當我們移動處 mouseMove，mouseMove 函數首先會設定變量 target，滑鼠移動在上面的 item，如果這個 item 在容器中 (checked with getAttribute)︰

　* 運行一小段代碼來改變目標的樣式。創造 rollover 效果。
　* 檢查滑鼠是否沒有放開，如果沒有︰
　　o 設定 curTarget 代表目前 item。
　　o 記錄 item 的目前位置，如果需要的話，我們可以將它返回。
　　o 克隆目前的 item 到 dragHelper 中，我們可以移動帶陰影效果的 item。
　　o item 拷貝到 dragHelper 後，原有的 item 還在滑鼠指針下，我們必須刪除掉 dragObj，這樣腳本起作用，dragObj 被包含在一個容器中。
　　o 抓取容器中所有的 item 目前坐標，高度/寬度，這樣隻需要記錄一次，當 item 被 drag 時，每隨 mouse 移動，每移鐘就會記錄成千上萬次。
　* 如果沒有，不需要做任何事，因為這不是一個需要移動的 item。

　　5、檢查 curTarget，它應該包含一個被移動的 item，如果存在，進行下面操作：

　* 開始移動帶有陰影的 item，這個 item 就是前文所創建的。
　* 檢查每個目前容器中的container，是否滑鼠已經移動到這些範圍內了。
　　o 我們檢查看一下正在拖曳的 item 是屬於哪個 container。
　　o 放置 item 在一個 container 的某一個 item 之前，或者整個 container 之後。
　　o 確認 item 是可見的。
　* 如果滑鼠不在 container 中，確認 item 是不可見了。

　　6、剩下的事就是捕捉 mouseUp 的事件了。

實現一個拖曳的全代碼：

<br />// iMouseDown represents the current mouse button state: up or down<br />/*<br />lMouseState represents the previous mouse button state so that we can<br />check for button clicks and button releases:<br /><br />if(iMouseDown && !lMouseState) // button just clicked!<br />if(!iMouseDown && lMouseState) // button just released!<br />*/<br />var mouseOffset = null;<br />var iMouseDown = false;<br />var lMouseState = false;<br />var dragObject = null;<br /><br />// Demo 0 variables<br />var DragDrops = [];<br />var curTarget = null;<br />var lastTarget = null;<br />var dragHelper = null;<br />var tempDiv = null;<br />var rootParent = null;<br />var rootSibling = null;<br /><br />Number.prototype.NaN0=function(){return isNaN(this)?0:this;}<br /><br />function CreateDragContainer(){<br /> /*<br /> Create a new "Container Instance" so that items from one "Set" can not<br /> be dragged into items from another "Set"<br /> */<br /> var cDrag = DragDrops.length;<br /> DragDrops[cDrag] = [];<br /><br /> /*<br /> Each item passed to this function should be a "container". Store each<br /> of these items in our current container<br /> */<br /> for(var i=0; i<arguments.length; i++){<br /> var cObj = arguments[i];<br /> DragDrops[cDrag].push(cObj);<br /> cObj.setAttribute('DropObj', cDrag);<br /><br /> /*<br /> Every top level item in these containers should be draggable. Do this<br /> by setting the DragObj attribute on each item and then later checking<br /> this attribute in the mouseMove function<br /> */<br /> for(var j=0; j<cObj.childNodes.length; j++){<br /><br /> // Firefox puts in lots of #text nodes...skip these<br /> if(cObj.childNodes[j].nodeName=='#text') continue;<br /><br /> cObj.childNodes[j].setAttribute('DragObj', cDrag);<br /> }<br /> }<br />}<br /><br />function mouseMove(ev){<br /> ev = ev || window.event;<br /><br /> /*<br /> We are setting target to whatever item the mouse is currently on<br /><br /> Firefox uses event.target here, MSIE uses event.srcElement<br /> */<br /> var target = ev.target || ev.srcElement;<br /> var mousePos = mouseCoords(ev);<br /><br /> // mouseOut event - fires if the item the mouse is on has changed<br /> if(lastTarget && (target!==lastTarget)){<br /> // reset the classname for the target element<br /> var origClass = lastTarget.getAttribute('origClass');<br /> if(origClass) lastTarget.className = origClass;<br /> }<br /><br /> /*<br /> dragObj is the grouping our item is in (set from the createDragContainer function).<br /> if the item is not in a grouping we ignore it since it can't be dragged with this<br /> script.<br /> */<br /> var dragObj = target.getAttribute('DragObj');<br /><br /> // if the mouse was moved over an element that is draggable<br /> if(dragObj!=null){<br /><br /> // mouseOver event - Change the item's class if necessary<br /> if(target!=lastTarget){<br /> var oClass = target.getAttribute('overClass');<br /> if(oClass){<br /> target.setAttribute('origClass', target.className);<br /> target.className = oClass;<br /> }<br /> }<br /><br /> // if the user is just starting to drag the element<br /> if(iMouseDown && !lMouseState){<br /> // mouseDown target<br /> curTarget = target;<br /><br /> // Record the mouse x and y offset for the element<br /> rootParent = curTarget.parentNode;<br /> rootSibling = curTarget.nextSibling;<br /><br /> mouseOffset = getMouseOffset(target, ev);<br /><br /> // We remove anything that is in our dragHelper DIV so we can put a new item in it.<br /> for(var i=0; i<dragHelper.childNodes.length; i++) dragHelper.removeChild(dragHelper.childNodes[i]);<br /><br /> // Make a copy of the current item and put it in our drag helper.<br /> dragHelper.appendChild(curTarget.cloneNode(true));<br /> dragHelper.style.display = 'block';<br /><br /> // set the class on our helper DIV if necessary<br /> var dragClass = curTarget.getAttribute('dragClass');<br /> if(dragClass){<br /> dragHelper.firstChild.className = dragClass;<br /> }<br /><br /> // disable dragging from our helper DIV (it's already being dragged)<br /> dragHelper.firstChild.removeAttribute('DragObj');<br /><br /> /*<br /> Record the current position of all drag/drop targets related<br /> to the element. We do this here so that we do not have to do<br /> it on the general mouse move event which fires when the mouse<br /> moves even 1 pixel. If we don't do this here the script<br /> would run much slower.<br /> */<br /> var dragConts = DragDrops[dragObj];<br /><br /> /*<br /> first record the width/height of our drag item. Then hide it since<br /> it is going to (potentially) be moved out of its parent.<br /> */<br /> curTarget.setAttribute('startWidth', parseInt(curTarget.offsetWidth));<br /> curTarget.setAttribute('startHeight', parseInt(curTarget.offsetHeight));<br /> curTarget.style.display = 'none';<br /><br /> // loop through each possible drop container<br /> for(var i=0; i<dragConts.length; i++){<br /> with(dragConts[i]){<br /> var pos = getPosition(dragConts[i]);<br /><br /> /*<br /> save the width, height and position of each container.<br /><br /> Even though we are saving the width and height of each<br /> container back to the container this is much faster because<br /> we are saving the number and do not have to run through<br /> any calculations again. Also, offsetHeight and offsetWidth<br /> are both fairly slow. You would never normally notice any<br /> performance hit from these two functions but our code is<br /> going to be running hundreds of times each second so every<br /> little bit helps!<br /><br /> Note that the biggest performance gain here, by far, comes<br /> from not having to run through the getPosition function<br /> hundreds of times.<br /> */<br /> setAttribute('startWidth', parseInt(offsetWidth));<br /> setAttribute('startHeight', parseInt(offsetHeight));<br /> setAttribute('startLeft', pos.x);<br /> setAttribute('startTop', pos.y);<br /> }<br /><br /> // loop through each child element of each container<br /> for(var j=0; j<dragConts[i].childNodes.length; j++){<br /> with(dragConts[i].childNodes[j]){<br /> if((nodeName=='#text') || (dragConts[i].childNodes[j]==curTarget)) continue;<br /><br /> var pos = getPosition(dragConts[i].childNodes[j]);<br /><br /> // save the width, height and position of each element<br /> setAttribute('startWidth', parseInt(offsetWidth));<br /> setAttribute('startHeight', parseInt(offsetHeight));<br /> setAttribute('startLeft', pos.x);<br /> setAttribute('startTop', pos.y);<br /> }<br /> }<br /> }<br /> }<br /> }<br /><br /> // If we get in here we are dragging something<br /> if(curTarget){<br /> // move our helper div to wherever the mouse is (adjusted by mouseOffset)<br /> dragHelper.style.top = mousePos.y - mouseOffset.y;<br /> dragHelper.style.left = mousePos.x - mouseOffset.x;<br /><br /> var dragConts = DragDrops[curTarget.getAttribute('DragObj')];<br /> var activeCont = null;<br /><br /> var xPos = mousePos.x - mouseOffset.x + (parseInt(curTarget.getAttribute('startWidth')) /2);<br /> var yPos = mousePos.y - mouseOffset.y + (parseInt(curTarget.getAttribute('startHeight'))/2);<br /><br /> // check each drop container to see if our target object is "inside" the container<br /> for(var i=0; i<dragConts.length; i++){<br /> with(dragConts[i]){<br /> if(((getAttribute('startLeft')) < xPos) &&<br /> ((getAttribute('startTop')) < yPos) &&<br /> ((getAttribute('startLeft') + getAttribute('startWidth')) > xPos) &&<br /> ((getAttribute('startTop') + getAttribute('startHeight')) > yPos)){<br /><br /> /*<br /> our target is inside of our container so save the container into<br /> the activeCont variable and then exit the loop since we no longer<br /> need to check the rest of the containers<br /> */<br /> activeCont = dragConts[i];<br /><br /> // exit the for loop<br /> break;<br /> }<br /> }<br /> }<br /><br /> // Our target object is in one of our containers. Check to see where our div belongs<br /> if(activeCont){<br /> // beforeNode will hold the first node AFTER where our div belongs<br /> var beforeNode = null;<br /><br /> // loop through each child node (skipping text nodes).<br /> for(var i=activeCont.childNodes.length-1; i>=0; i--){<br /> with(activeCont.childNodes[i]){<br /> if(nodeName=='#text') continue;<br /><br /> // if the current item is "After" the item being dragged<br /> if(<br /> curTarget != activeCont.childNodes[i] &&<br /> ((getAttribute('startLeft') + getAttribute('startWidth')) > xPos) &&<br /> ((getAttribute('startTop') + getAttribute('startHeight')) > yPos)){<br /> beforeNode = activeCont.childNodes[i];<br /> }<br /> }<br /> }<br /><br /> // the item being dragged belongs before another item<br /> if(beforeNode){<br /> if(beforeNode!=curTarget.nextSibling){<br /> activeCont.insertBefore(curTarget, beforeNode);<br /> }<br /><br /> // the item being dragged belongs at the end of the current container<br /> } else {<br /> if((curTarget.nextSibling) || (curTarget.parentNode!=activeCont)){<br /> activeCont.appendChild(curTarget);<br /> }<br /> }<br /><br /> // make our drag item visible<br /> if(curTarget.style.display!=''){<br /> curTarget.style.display = '';<br /> }<br /> } else {<br /><br /> // our drag item is not in a container, so hide it.<br /> if(curTarget.style.display!='none'){<br /> curTarget.style.display = 'none';<br /> }<br /> }<br /> }<br /><br /> // track the current mouse state so we can compare against it next time<br /> lMouseState = iMouseDown;<br /><br /> // mouseMove target<br /> lastTarget = target;<br /><br /> // track the current mouse state so we can compare against it next time<br /> lMouseState = iMouseDown;<br /><br /> // this helps prevent items on the page from being highlighted while dragging<br /> return false;<br />}<br /><br />function mouseUp(ev){<br /> if(curTarget){<br /> // hide our helper object - it is no longer needed<br /> dragHelper.style.display = 'none';<br /><br /> // if the drag item is invisible put it back where it was before moving it<br /> if(curTarget.style.display == 'none'){<br /> if(rootSibling){<br /> rootParent.insertBefore(curTarget, rootSibling);<br /> } else {<br /> rootParent.appendChild(curTarget);<br /> }<br /> }<br /><br /> // make sure the drag item is visible<br /> curTarget.style.display = '';<br /> }<br /> curTarget = null;<br /> iMouseDown = false;<br />}<br /><br />function mouseDown(){<br /> iMouseDown = true;<br /> if(lastTarget){<br /> return false;<br /> }<br />}<br /><br />document.onmousemove = mouseMove;<br />document.onmousedown = mouseDown;<br />document.onmouseup = mouseUp;<br /><br />window.onload = function(){<br /> // Create our helper object that will show the item while dragging<br /> dragHelper = document.createElement('DIV');<br /> dragHelper.style.cssText = 'position:absolute;display:none;';<br /> <br /> CreateDragContainer(<br /> document.getElementById('DragContainer1'),<br /> document.getElementById('DragContainer2'),<br /> document.getElementById('DragContainer3')<br /> );<br /><br /> document.body.appendChild(dragHelper);<br />}<br /><br /><!--the mouse over and dragging class are defined on each item--><br /><br /><div class="DragContainer" id="DragContainer1"><br /> <div class="DragBox" id="Item1" overClass="OverDragBox" dragClass="DragDragBox">Item #1</div><br /> <div class="DragBox" id="Item2" overClass="OverDragBox" dragClass="DragDragBox">Item #2</div><br /> <div class="DragBox" id="Item3" overClass="OverDragBox" dragClass="DragDragBox">Item #3</div><br /> <div class="DragBox" id="Item4" overClass="OverDragBox" dragClass="DragDragBox">Item #4</div><br /></div><br /><div class="DragContainer" id="DragContainer2"><br /> <div class="DragBox" id="Item5" overClass="OverDragBox" dragClass="DragDragBox">Item #5</div><br /> <div class="DragBox" id="Item6" overClass="OverDragBox" dragClass="DragDragBox">Item #6</div><br /> <div class="DragBox" id="Item7" overClass="OverDragBox" dragClass="DragDragBox">Item #7</div><br /> <div class="DragBox" id="Item8" overClass="OverDragBox" dragClass="DragDragBox">Item #8</div><br /></div><br /><div class="DragContainer" id="DragContainer3"><br /> <div class="DragBox" id="Item9" overClass="OverDragBox" dragClass="DragDragBox">Item #9</div><br /> <div class="DragBox" id="Item10" overClass="OverDragBox" dragClass="DragDragBox">Item #10</div><br /> <div class="DragBox" id="Item11" overClass="OverDragBox" dragClass="DragDragBox">Item #11</div><br /> <div class="DragBox" id="Item12" overClass="OverDragBox" dragClass="DragDragBox">Item #12</div><br /></div><br />

　　你現在擁有了拖拽的所有東西。

　　下面的三個 demo 是記錄事件歷史。當你的滑鼠在 item 上移動，將記錄所生的事件，如果你不明白可以嘗試一下滑鼠的劃過或者拖曳，看有什麼發生。

　　觀看範例

。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙一﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙二﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙三﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙四﹚

今天因為要寫關於 JavaScript 捕捉滑鼠位置的程式，很意外的被我找到這篇文章，常常在很多網站看到大家用這樣的技術來做版面編排，但是都苦無方法來研究，看到了這篇文章讓我欣喜若狂，所以我擅自轉貼到我的筆記上，再找時間好好研究研究，為尊重原作者做以下申明︰ 原文︰How to Drag and Drop in JavaScript 作者︰Mark Kahn 譯者︰雪山老人 所有本文及範例檔案相關版權為以上作者所有。