html5實現元素的拖動和擺放

例項：

拖動到矩形框中:

執行效果：

首先，為了使元素可拖動，把 draggable 屬性設定為 true ：

然後，規定當元素被拖動時，會發生什麼。

在上面的例子中，ondragstart 屬性呼叫了乙個函式，drag(event)，它規定了被拖動的資料。

datatransfer.setdata()方法設定被拖資料的資料型別和值：

function drag(ev)

text 是乙個 domstring 表示要新增到 drag object 的拖動資料的型別。值是可拖動元素的 id (「drag1」)。

ondragover事件規定在何處放置被拖動的資料。

預設地，無法將資料/元素放置到其他元素中。如果需要設定允許放置，我們必須阻止對元素的預設處理方式。

這要通過呼叫 ondragover 事件的 event.preventdefault() 方法：

event.preventdefault()

當放置被拖資料時，會發生drop事件。

在上面的例子中，ondrop 屬性呼叫了乙個函式，drop(event)：

function drop(ev)

**解釋：

呼叫 preventdefault() 來避免瀏覽器對資料的預設處理（drop 事件的預設行為是以鏈結形式開啟）

通過 datatransfer.getdata(「text」) 方法獲得被拖的資料。該方法將返回在 setdata() 方法中設定為相同型別的任何資料。

被拖資料是被拖元素的 id (「drag1」)

把被拖元素追加到放置元素（目標元素）中

將乙個元素拖動到另乙個元素上步驟如下 ondragstart 屬性呼叫了乙個 drag event 函式，規定拖動什麼資料在drag event 函式裡面設定被拖動資料的資料型別和值資料型別是 text 而值是這個可拖動元素的 id drag1 ev.datatransfer.setdata...

下面只是實現了上下滑動慣性，沒有寫水平滑動慣性。臨時筆記，可能會在以後的過程中不斷更新優化慣性原理產生的速度移動距離移動時間距離鬆開的座標上次的座標距離差時間鬆開的時間按下的時間時間差 var dargfun false this.dargdom.addeventlist...