拖拽效果的實現原理分析2

上文對html5支援的瀏覽器的拖拽效果進行了分析，本文不採用任何庫，來分析下拖拽的過程

先想想我們平時拖拽是怎麼操作的，大致可以分為幾下幾個步驟：

滑鼠按下，滑鼠移動，拖拽，被拖動的物件跟著走

滑鼠鬆開，物件停止，無拖動了

計算距離，拖拽的距離（滑鼠移動）

對應在事件上就是

onmousedown，onmousemove ，開始拖拽

onmouseup ，停止拖拽

計算相對的拖拽距離

下面我們按照這種思路，寫乙個拖拽效果,假設我們拖動標題，這塊的內容就跟著走。

首先我們來寫乙個含有標題和內容的塊

css為：

#doc

#title

#content

html:

標題內容……

首先在拖動的時候，我們要計算拖動物件的相對於螢幕的上方和下方的距離

top = target.top;

left = target.left;

書寫onmousedown 事件，這個是能夠被拖動物件上

title.onmousedown = function(event);

//獲取相關css屬性

var getcss = function(o,key);

var startdrag = function(title, target)

params.flag = true;

params.currentx = event.pagex ? event.pagex :event.clientx +document.body.scrollleft||document.documentelement.scrollleft,

params.currenty = event.pagey ? event.pagey :event.clienty +document.body.scrolltop||document.documentelement.scrolltop;

};document.onmouseup = function();

document.onmousemove = function(event)

}

};本文完。。

上文對html5支援的瀏覽器的拖拽效果進行了分析，本文不採用任何庫，來分析下拖拽的過程先想想我們平時拖拽是怎麼操作的，大致可以分為幾下幾個步驟滑鼠按下，滑鼠移動，拖拽，被拖動的物件跟著走滑鼠鬆開，物件停止，無拖動了計算距離，拖拽的距離滑鼠移動對應在事件上就是 onmousedown，on...

一 html5現在已經提供支援拖動和拖放的api了，所以，支援html5的瀏覽器可以不必折騰了，直接使用吧。關於html5的拖拽api 請檢視以下摘錄一些比較重要的物件和事件以及屬性首先，要使元素能否能被拖拽，必須設定 draggable true 例如只有設定draggable才可以被拖拽...