資訊專欄INFORMATION COLUMN
摘要：在沒有事件的時候，做元素拖拽使用的都是事件，但在處理過程中可能有這樣或那樣的問題，主要還是感覺不流暢，如果小伙伴們不在考慮低版本的話，可以償試一下，會有意想不到的收獲。。
在沒有drag事件的時候，做元素拖拽使用的都是mouse事件，但mouse在處理過程中可能有這樣或那樣的問題，主要還是感覺不流暢，如果小伙伴們不在考慮低版本IE( 下面來展示下drap的主要事件 在拖動目標上觸發事件 (源元素): ondragstart - 用戶開始拖動元素時觸發
ondrag - 元素正在拖動時觸發
ondragend - 用戶完成元素拖動后觸發
釋放目標時觸發的事件:
ondragenter - 當被鼠標拖動的對象進入其容器范圍內時觸發此事件
ondragover - 當某被拖動的對象在另一對象容器范圍內拖動時觸發此事件
ondragleave - 當被鼠標拖動的對象離開其容器范圍內時觸發此事件
ondrop - 在一個拖動過程中，釋放鼠標鍵時觸發此事件
dataTransfer對象(了解就行了)：
dropEffect 設置放下效果（copy move link none）
effectAllowed 允許的效果 (copy move link copyLink copyMove linkMove all
none uninitialized(默認值，等同于all))
files FileList對象
setDragImage()
setData()
getData()
clearData()
演示效果
HTML:
- 標題一
- 標題二
- 標題三
- 標題四
- 標題五
JS:
在dragover和drop環節上阻止默認事件(e.preventDefault())是少不了的，，不信的少俠可以嘗試一下，以來印證老夫所言非虛。。。哈哈哈，偏偏然，隱身山林中……
控制臺打印
示例
完整代碼
拖動
最后向大家推薦一個拖動插件 http://dragsort.codeplex.com/ 用過感覺還不錯
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80722.html
摘要：注意點在鼠標操作拖放期間，有一些事件可能觸發多次，比如和?？赏献г兀ㄗh使用，設定可拖拽元素的鼠標游標，提升交互。在中使用拖拽中使用可以直接綁定到組件上。 什么是 Drag and Drop （拖放）？ 簡單來說，HTML5 提供了 Drag and Drop API，允許用戶用鼠標選中一個可拖動元素，移動鼠標拖放到一個可放置到元素的過程。 我相信每個人都或多或少接觸過拖放，比如瀏覽...
摘要：介紹是一款輕量級的拖放排序列表的插件雖然體積小，但是功能很強大下載地址官方特點支持觸屏設備和大部分瀏覽器以下的就不支持了，原因都懂得可以從一個列表容器中拖拽一個列表單元到其他容器或本列表容器中進行排序移動列表單元時有動畫支持拖放操作和可選擇 介紹 Sortable.js是一款輕量級的拖放排序列表的js插件（雖然體積小，但是功能很強大）下載地址：https://github.com/Ru...
閱讀 351·2024-11-07 18:25
閱讀 130598·2024-02-01 10:43
閱讀 914·2024-01-31 14:58
閱讀 879·2024-01-31 14:54
閱讀 82884·2024-01-29 17:11
閱讀 3176·2024-01-25 14:55
閱讀 2028·2023-06-02 13:36
閱讀 3108·2023-05-23 10:26
