HTML5 drag drop 拖拽與拖放簡介

2022-05-02 20:39:14 字數 3060 閱讀 6619

html5提供專門的拖拽與拖放的api，以後實現這類效果就不必亂折騰了。但是，考慮到opera瀏覽器似乎對此不感冒，在通用性上有待商榷，所以這裡也就簡單說一說。

datatransfer 物件：退拽物件用來傳遞的媒介，使用一般為event.datatransfer。

draggable 屬性：就是標籤元素要設定draggable=true，否則不會有效果，例如：

列表1
ondragstart 事件：當拖拽元素開始被拖拽的時候觸發的事件，此事件作用在被拖曳元素上

ondragenter 事件：當拖曳元素進入目標元素的時候觸發的事件，此事件作用在目標元素上

ondragover 事件：拖拽元素在目標元素上移動的時候觸發的事件，此事件作用在目標元素上

ondrop 事件：被拖拽的元素在目標元素上同時滑鼠放開觸發的事件，此事件作用在目標元素上

ondragend 事件：當拖拽完成後觸發的事件，此事件作用在被拖曳元素上

event.preventdefault() 方法：阻止預設的些事件方法等執行。在ondragover中一定要執行preventdefault()，否則ondrop事件不會被觸發。另外，如果是從其他應用軟體或是檔案中拖東西進來，尤其是的時候，預設的動作是顯示這個或是相關資訊，並不是真的執行drop。此時需要用用document的ondragover事件把它直接乾掉。

event.effectallowed 屬性：就是拖拽的效果。

為了便於理解上面的粗體的事件啊物件啊什麼的，做了個很簡單的demo頁面。

您可以狠狠地點選這裡：html5 drag & drop刪除元素demo

此demo實現的效果是把右側的列表拖動到左側的寫著果敢的「垃圾箱」三個字的div層上，此列表元素就會從這個星球上消失。如下截圖***所示：

源**展示

其中html結構如下：

<


div 


class


="dustbin"


><


br />垃<


br />圾<


br />箱


div>


<


div 


class


="dragbox"


>


<


div 


class


="draglist"


title


="拖拽我"


draggable


="true"


>列表1


div>


<


div 


class


="draglist"


title


="拖拽我"


draggable


="true"


>列表2


div>


<


div 


class


="draglist"


title


="拖拽我"


draggable


="true"


>列表3


div>


<


div 


class


="draglist"


title


="拖拽我"


draggable


="true"


>列表4


div>


<


div 


class


="draglist"


title


="拖拽我"


draggable


="true"


>列表5


div>


<


div 


class


="draglist"


title


="拖拽我"


draggable


="true"


>列表6


div>


div>


<


div 


class


="dragremind"


>


div>
js**如下：

var $ = function


(selector) ;


var eledustbin = $(".dustbin")[0], eledrags = $(".draglist"), ldrags = eledrags.length, eleremind = $(".dragremind")[0], eledrag = null


;for (var i=0; i) ;


eledrags[i].ondragstart = function


(ev) ;


eledrags[i].ondragend = function


(ev) ;


}eledustbin.ondragover = function


(ev) ;


eledustbin.ondragenter = function


(ev) ;


eledustbin.ondrop = function


(ev) 


this.style.color = "#000000";


return


false


;};
根據自己的簡單的測試，低版本的ie瀏覽器確實支援諸如ondragstart事件，但是會報不認識datatransfer的錯誤。可見ie在細節的處理上與現代瀏覽器有些不同。但是，目前自己沒有這麼多精氣神把ie下的拖拽也折騰出來，故請原諒目前demo在ie下是紋絲不動，沒有效果也不報錯的。回頭有功夫，一定會把ie相關的些東西補上。

html5拖拽 初探

先看看效果 完整測試 html5 拖拽 box 接下來對 進行一一講解 drag的英譯是 拖 拽 drop的意思是 放下 drag和drop 是html5中新增的特性，任何元素都能夠拖放 大部分主流瀏覽器目前也夠支援html5的拖放功能。1.我們想要拖動那個元素，首先要把這個元素設定成可拖拽，將該元...

HTML5之拖拽功能

預設可拖動元素 draggable屬性 其他元素該屬性值為true，則可被拖動。chrome 可直接顯示拖動效果 firefox 需要為ondragstart事件指定 攜帶資料，才能顯示拖動效果。dragelement.ondragstart function evt 阻止放置物件的預設 drope...

今天來說說html5的拖拽

先看demo datatransfer物件 退拽物件用來傳遞的媒介，使用一般為event.datatransfer draggable 給拖拽元素的draggable屬性設定成true 表示該元素可以進行拖拽了 ondragstart事件 拖拽元素開始拖拽的時候觸發的 ondragover事件 拖拽...