H5 拖拽,一個函數搞定,直接指定對象設置可拖拽

頁面上，彈個小窗體，想讓它能夠拖拽，又不想 加載一堆js，就簡單的能讓他能夠拖動？ 嗯，下面有這樣一個函數,調用下就行了！

1. 先來講說 H5的 拖拽

在 HTML5 中，拖放是標準的一部分，任何元素都可以拖放。

設置元素爲可拖放

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

<img draggable="true" />

 

拖動開始 - ondragstart 和 setData()

當元素被拖動時，要發生什麼。

如，ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的數據。

dataTransfer.setData() 方法設置被拖數據的數據類型和值：

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

 在這個例子中，數據類型是 "Text"，值是被拖動元素的 id 。

 

拖動正在進行 - ondrag

此事件爲元素正在被拖動的過程當中觸發的，不斷觸發。

 

拖動完成 - ondragend

此時用戶鬆開鼠標，拖動結束了，該幹嗎幹嗎去。

固然，要不要吧哪一個元素的位置移動下？

 

被拖動的元素進來了 - ondragenter

被鼠標拖動的對象進入其容器範圍內了。是否是要準備 接收這個拖來的元素，安排個位置? 

 

放到何處 - ondragover

ondragover 事件規定在何處放置被拖動的元素。此時尚未真正的完成拖動，被拖動元素可能還在、還會繼續被拖動。準備的位置預熱，來吧。

默認地，沒法將數據/元素放置到其餘元素中。若是須要設置容許放置，咱們必須阻止對元素的默認處理方式。

這要經過調用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

 

被拖動的元素離開了 - ondragleave

被鼠標拖動的對象離開其容器範圍內了。煮熟的鴨子飛走了，準備的位置要撤銷。（白準備了。）

 

進行放置 - ondrop 和 getData

當放置被拖元素時，會發生 drop 事件。這時纔是真正的結束了拖放，蹲坑咯。（其餘通過的元素（ondragenter  、ondragover 、ondragleave）不高興了：「忽悠咱們是把。」）

在上面的例子中，ondrop 屬性調用了一個函數，drop(event)：

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

 

代碼解釋：

• 調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行爲是以連接形式打開）
• 經過 dataTransfer.getData("Text") 方法得到被拖的數據。該方法將返回在 setData() 方法中設置爲相同類型的任何數據。
• 被拖數據是被拖元素的 id ("drag1")
• 把被拖元素追加到放置元素（目標元素）中

簡述函數:

   被拖拽元素上觸發的事件：

• 　　1.ondragstart - 用戶開始拖動元素時觸發
• 　　2.ondrag - 元素正在拖動時觸發
• 　　3.ondragend - 用戶完成元素拖動後觸發

   目標元素上觸發的事件：

• 　　1.ondragenter - 當被鼠標拖動的對象進入其容器範圍內時觸發此事件
• 　　2.ondragover - 當某被拖動的對象在另外一對象容器範圍內拖動時觸發此事件
• 　　3.ondragleave - 當被鼠標拖動的對象離開其容器範圍內時觸發此事件
• 　　4.ondrop - 在一個拖動過程當中，釋放鼠標鍵時觸發此事件

      另外，須要的知識點就是event對象中的preventDefault()。在ondragover中必定要執行preventDefault()，不然ondrop事件不會被觸發。
不過，保存在dataTransfer對象中的數據只能在ondrop事件處理程序中讀取。

      另外，若是是從其餘應用軟件或是文件中拖東西進來，尤爲是圖片的時候，默認的動做是顯示這個圖片或是相關信息，並非真的執行drop。
此時須要用用document的ondragover事件把它直接幹掉。

 2. 乾貨,一個函數解決問題

function setDragable(drg,mov){
    let drgObj=drg;
    let moveObj=mov||drg;
    function G(o){return document.querySelector(o)}
    //獲取元素的縱座標,距離文檔頂部的高度
    function getTop(e) {
      var offset = e.offsetTop;
      if (e.offsetParent != null) offset += getTop(e.offsetParent);
      return offset;
    }
    //獲取元素的橫座標,距離文檔左邊的寬度
    function getLeft(e) {
      var offset = e.offsetLeft;
      if (e.offsetParent != null) offset += getLeft(e.offsetParent);
      return offset;
    }
    //拖放開始
    function dragstart(e){
        let off={x:e.x-getLeft(moveObj),y:e.y-getTop(moveObj)};
        moveObj.dragOff=off;
    }
    //拖放結束
    function dragend(e){
        let off=moveObj.dragOff;
        moveObj.style.top=e.y-off.y+"px";
        moveObj.style.left=e.x-off.x+"px";
    }

    if(typeof drg !="object")
        drgObj=G(drg);
    if(typeof mov != "object")
        moveObj=G(mov||drg);
    drgObj.draggable = true;
    drgObj.style.cursor= "move";
    moveObj.style.position = "absolute";
    //監聽拖動事件
    drgObj.addEventListener("dragstart",dragstart,true);
    drgObj.addEventListener("dragend",dragend,true);
}

 怎麼用?

setDragable(要拖動的對象);
setDragable(容許拖動的對象, 拖動要移動的對象);
setDragable(標題欄, 窗體);

 

 搞定。 訪問Github，get更多技能:https://github.com/lzpong/H5_JS_Tools。

now, you can try it with copy&paste...如今，你能夠試試，複製粘貼，運行。