中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

運行代碼框
<script> var iMouseDown = false; var dragObject = null; Number.prototype.NaN0=function(){return isNaN(this)?0:this;} // Demo 0 variables var DragDrops = []; var curTarget = null; var lastTarget = null; function makeDraggable(item){ if(!item) return; item.onmousedown = function(ev){ dragObject = this; mouseOffset = getMouseOffset(this, ev); return false; } } function getMouseOffset(target, ev){ ev = ev || window.event; var docPos = getPosition(target); var mousePos = mouseCoords(ev); return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y}; } function getPosition(e){ var left = 0; var top = 0; while (e.offsetParent){ left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0); e = e.offsetParent; } left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0); return {x:left, y:top}; } function mouseCoords(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } function mouseDown(ev){ ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.onmousedown || target.getAttribute('DragObj')){ return false; } } function mouseUp(ev){ //dragObject = null; if(dragObject){ ev = ev || window.event; var mousePos = mouseCoords(ev); var dT = dragObject.getAttribute('droptarget'); if(dT){ var targObj = document.getElementById(dT); var objPos = getPosition(targObj); if((mousePos.x > objPos.x) && (mousePos.y > objPos.y) && (mousePos.x<(objPos.x+parseInt(targObj.offsetWidth))) && (mousePos.y<(objPos.y+parseInt(targObj.offsetHeight)))){ var nSrc = targObj.getAttribute('newSrc'); if(nSrc){ dragObject.src = nSrc; setTimeout(function(){ if(!dragObject || !dragObject.parentNode) return; dragObject.parentNode.removeChild(dragObject); dragObject = null; }, parseInt(targObj.getAttribute('timeout'))); } else { dragObject.parentNode.removeChild(dragObject); } } } } dragObject = null; iMouseDown = false; } function mouseMove(ev){ ev = ev || window.event; /* We are setting target to whatever item the mouse is currently on Firefox uses event.target here, MSIE uses event.srcElement */ var target = ev.target || ev.srcElement; var mousePos = mouseCoords(ev); if(dragObject){ dragObject.style.position = 'absolute'; dragObject.style.top = mousePos.y - mouseOffset.y; dragObject.style.left = mousePos.x - mouseOffset.x; } // track the current mouse state so we can compare against it next time lMouseState = iMouseDown; // this prevents items on the page from being highlighted while dragging if(curTarget || dragObject) return false; } function addDropTarget(item, target){ item.setAttribute('droptarget', target); } document.onmousemove = mouseMove; document.onmousedown = mouseDown; document.onmouseup = mouseUp; window.onload = function (){ makeDraggable(document.getElementById('DragImage9')); makeDraggable(document.getElementById('DragImage10')); makeDraggable(document.getElementById('DragImage11')); makeDraggable(document.getElementById('DragImage12')); addDropTarget(document.getElementById('DragImage9'), 'TrashImage1'); addDropTarget(document.getElementById('DragImage10'), 'TrashImage1'); addDropTarget(document.getElementById('DragImage11'), 'TrashImage1'); addDropTarget(document.getElementById('DragImage12'), 'TrashImage1'); } </script> <FIELDSET id=Demo6 style="HEIGHT: 70px"><h3>Demo - Drag any image onto the trashcan</h3><IMG id=TrashImage1 src="/articleimg/2006/07/3791/drag_drop_trash.gif" timeout="600" newSrc="/articleimg/2006/07/3791/transparent.gif"> <IMG id=DragImage9 src="/articleimg/2006/07/3791/drag_drop_spade.gif"> <IMG id=DragImage10 src="/articleimg/2006/07/3791/drag_drop_heart.gif"> <IMG id=DragImage11 src="/articleimg/2006/07/3791/drag_drop_diamond.gif"> <IMG id=DragImage12 src="/articleimg/2006/07/3791/drag_drop_club.gif"> </FIELDSET>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

鼠標釋放時會去取是否有drop屬性，如果存在，同時鼠標指針還在drop的范圍內(nèi)，執(zhí)行drop操作．我們檢查鼠標指針位置是否在目標范圍是用(mousePos.x>targetPos.x)，而且還要符合條件(mousePos.x<(targPos.x + targWidth))．如果所有的條件符合，說明指針確實在范圍內(nèi)，可以執(zhí)行drop指令了．

Pulling It All Together

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

下面的代碼將創(chuàng)建container(容器),而且使任何一個需要drag/drop的item變成一個容器的item.代碼在這個文章第二個demo的后面，它可以用戶記錄一個list(列表)，定為一個導(dǎo)航窗口在左邊或者右邊，或者更多的函數(shù)你可以想到的．

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

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

2、有了mouseDown與mouseUp函數(shù)．所有的操作會對應(yīng)到當?shù)絠MouseDown的狀態(tài)中，只有當mouse左鍵為按下時iMouseDown才為真，否則為假．

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

4、現(xiàn)在我們的代碼知道每個item的加入，當我們移動處mouseMove，mouseMove函數(shù)首先會設(shè)置變量target，鼠標移動在上面的item，如果這個item在容器中(checked with getAttribute):

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

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

• 開始移動帶有陰影的item，這個item就是前文所創(chuàng)建的
• 檢查每個當前容器中的container，是否鼠標已經(jīng)移動到這些范圍內(nèi)了
• 我們檢查看一下正在拖動的item是屬于哪個container
• 放置item在一個container的某一個item之前，或者整個container之后
• 確認item是可見的
• 如果鼠標不在container中，確認item是不可見了．

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

出處：sohotx.com
責任編輯：moby

上一頁 怎么用javascript進行拖拽 [3] 下一頁 怎么用javascript進行拖拽 [5]

◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論