基于HTML5的拖動排序

church 發布于2019-08-22 11:03 / 3448人閱讀

摘要：突然想到拖動這個。之前使用實例排序去實現了一個拖動排序，也有用實現的一個拖動排序。采用的方式，獲取排序位置的時候需要更具，再去排序。為的時候，嘗試拖動的時候，不會出現虛影，直接就是選中文字。

好久沒有寫文章，不知道寫什么好。突然想到拖動這個API。之前使用 jQuery UI 實例 - 排序（Sortable）去實現了一個拖動排序，也有用jquery.gridly.js實現的一個拖動排序。

jQuery UI - Sortable
DOM節點的移動，用起來挺好的，使用簡單，配套的組件也多。順序就直接是DOM的順序。

jquery.gridly.js
采用absolute的方式，獲取排序位置的時候需要更具left，top再去排序。

HTML5-draggable
HTML5的新特性，想要拖放某個元素，講DOM的draggable屬性為true，反之不允許拖動。

draggable屬性

http://jsrun.net/ptkKp/edit  
    draggable為true的時候，我們可以試試。當你嘗試拖動的時候，會有一個虛影。
http://jsrun.net/ZtkKp/edit
    draggable為false的時候，嘗試拖動的時候，不會出現虛影，直接就是選中文字。

那么為什么我們draggable設置好了以后，也可以拖動，但是松開鼠標的時候不生效呢？那么我們就要想想我們拖動的時候都發生了什么。

draggable事件

ondragstart 元素被拖動時觸發
http://jsrun.net/ftkKp/edit
我們可以通過target和type看到觸發事件的dom節點，以及事件名稱

ondragover 當你拖動時在元素之上觸發
http://jsrun.net/QtkKp/edit
通過例子可以發現，我們拖動上面的元素到下面綠色區域就觸發事件

默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。 event.preventDefault() ;

ondrop 當你進行放置的時候（也就是你拖動，松開按鍵的時候）
http://jsrun.net/dtkKp/edit 我們會發現ondrop居然沒有生效，這個時候我們去看我們上面刪除的那句話。我們將它應用進去
http://jsrun.net/ttkKp/edit 加上了ondragover 的阻止默認事件。并且里面多加了個去抖(1秒，超長時長 = = )

簡單版本

http://jsrun.net/CtkKp/edit

先放一個appendChild的。本期就先寫到這里了

云服務器 GPU云服務器最快的基于比較的排序算法拖動排序 js拖動排序基于HTML5的webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91682.html

拖放排序插件Sortable.js

摘要：介紹是一款輕量級的拖放排序列表的插件雖然體積小，但是功能很強大下載地址官方特點支持觸屏設備和大部分瀏覽器以下的就不支持了，原因都懂得可以從一個列表容器中拖拽一個列表單元到其他容器或本列表容器中進行排序移動列表單元時有動畫支持拖放操作和可選擇介紹 Sortable.js是一款輕量級的拖放排序列表的js插件（雖然體積小，但是功能很強大）下載地址：https://github.com/Ru...

tomorrowwu 2019-08-20 13:59 評論0 收藏0
使用 Drag and Drop 給Web應用提升交互體驗

摘要：注意點在鼠標操作拖放期間，有一些事件可能觸發多次，比如和。可拖拽元素，建議使用，設定可拖拽元素的鼠標游標，提升交互。在中使用拖拽中使用可以直接綁定到組件上。什么是 Drag and Drop （拖放）？簡單來說，HTML5 提供了 Drag and Drop API，允許用戶用鼠標選中一個可拖動元素，移動鼠標拖放到一個可放置到元素的過程。我相信每個人都或多或少接觸過拖放，比如瀏覽...

legendmohe 2019-08-02 12:03 評論0 收藏0
基于H5實現的react拖拽排序組件

摘要：拖拽排序組件地址因為使用了技術棧，所以封裝優先考慮輸入和輸出。基于數據驅動去渲染頁面控制拖拽元素的順序。例如原生的事件，在里應使用事件。拖拽排序組件Github地址：https://github.com/VicEcho/VD... 因為使用了react.js技術棧，所以封裝優先考慮輸入和輸出。基于數據驅動去渲染頁面、控制拖拽元素的順序。由于我不考慮兼容IE8等舊版本瀏覽器，拖拽的效...

sevi_stuo 2019-08-23 10:58 評論0 收藏0