資訊專欄INFORMATION COLUMN
摘要：在沒有事件的時(shí)候，做元素拖拽使用的都是事件，但在處理過程中可能有這樣或那樣的問題，主要還是感覺不流暢，如果小伙伴們不在考慮低版本的話，可以償試一下，會(huì)有意想不到的收獲。。
在沒有drag事件的時(shí)候，做元素拖拽使用的都是mouse事件，但mouse在處理過程中可能有這樣或那樣的問題，主要還是感覺不流暢，如果小伙伴們不在考慮低版本IE( 下面來(lái)展示下drap的主要事件 在拖動(dòng)目標(biāo)上觸發(fā)事件 (源元素): ondragstart - 用戶開始拖動(dòng)元素時(shí)觸發(fā)
ondrag - 元素正在拖動(dòng)時(shí)觸發(fā)
ondragend - 用戶完成元素拖動(dòng)后觸發(fā)
釋放目標(biāo)時(shí)觸發(fā)的事件:
ondragenter - 當(dāng)被鼠標(biāo)拖動(dòng)的對(duì)象進(jìn)入其容器范圍內(nèi)時(shí)觸發(fā)此事件
ondragover - 當(dāng)某被拖動(dòng)的對(duì)象在另一對(duì)象容器范圍內(nèi)拖動(dòng)時(shí)觸發(fā)此事件
ondragleave - 當(dāng)被鼠標(biāo)拖動(dòng)的對(duì)象離開其容器范圍內(nèi)時(shí)觸發(fā)此事件
ondrop - 在一個(gè)拖動(dòng)過程中，釋放鼠標(biāo)鍵時(shí)觸發(fā)此事件
dataTransfer對(duì)象(了解就行了)：
dropEffect 設(shè)置放下效果（copy move link none）
effectAllowed 允許的效果 (copy move link copyLink copyMove linkMove all
none uninitialized(默認(rèn)值，等同于all))
files FileList對(duì)象
setDragImage()
setData()
getData()
clearData()
演示效果
HTML:
- 標(biāo)題一
- 標(biāo)題二
- 標(biāo)題三
- 標(biāo)題四
- 標(biāo)題五
JS:
在dragover和drop環(huán)節(jié)上阻止默認(rèn)事件(e.preventDefault())是少不了的，，不信的少俠可以嘗試一下，以來(lái)印證老夫所言非虛。。。哈哈哈，偏偏然，隱身山林中……
控制臺(tái)打印
示例
完整代碼
拖動(dòng)
最后向大家推薦一個(gè)拖動(dòng)插件 http://dragsort.codeplex.com/ 用過感覺還不錯(cuò)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/80722.html
摘要：注意點(diǎn)在鼠標(biāo)操作拖放期間，有一些事件可能觸發(fā)多次，比如和。可拖拽元素，建議使用，設(shè)定可拖拽元素的鼠標(biāo)游標(biāo)，提升交互。在中使用拖拽中使用可以直接綁定到組件上。 什么是 Drag and Drop （拖放）？ 簡(jiǎn)單來(lái)說(shuō)，HTML5 提供了 Drag and Drop API，允許用戶用鼠標(biāo)選中一個(gè)可拖動(dòng)元素，移動(dòng)鼠標(biāo)拖放到一個(gè)可放置到元素的過程。 我相信每個(gè)人都或多或少接觸過拖放，比如瀏覽...
摘要：介紹是一款輕量級(jí)的拖放排序列表的插件雖然體積小，但是功能很強(qiáng)大下載地址官方特點(diǎn)支持觸屏設(shè)備和大部分瀏覽器以下的就不支持了，原因都懂得可以從一個(gè)列表容器中拖拽一個(gè)列表單元到其他容器或本列表容器中進(jìn)行排序移動(dòng)列表單元時(shí)有動(dòng)畫支持拖放操作和可選擇 介紹 Sortable.js是一款輕量級(jí)的拖放排序列表的js插件（雖然體積小，但是功能很強(qiáng)大）下載地址：https://github.com/Ru...
摘要：內(nèi)容不可被拖動(dòng)。指定一個(gè)元素拖動(dòng)發(fā)生時(shí)顯示在光標(biāo)下方，三個(gè)參數(shù)分別是要顯示的元素和光標(biāo)在顯示元素中的坐標(biāo)。返回被拖放文件的對(duì)象。返回事件中傳遞的數(shù)據(jù)類型的類似數(shù)組的集合。 拖~ 在js里面關(guān)于拖這個(gè)概念是完全沒有的(except h5). 以前只能造一大堆的輪子，比如使用mousedown + mousemove + mouseup. 這3個(gè)事件結(jié)合起來(lái)實(shí)現(xiàn)復(fù)雜的UI操作。 現(xiàn)在，h5...
閱讀 1564·2025-02-07 13:29
閱讀 1002·2024-11-07 18:25
閱讀 131496·2024-02-01 10:43
閱讀 1328·2024-01-31 14:58
閱讀 1144·2024-01-31 14:54
閱讀 83571·2024-01-29 17:11
閱讀 3869·2024-01-25 14:55
閱讀 2390·2023-06-02 13:36
