成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

基于HTML5的拖動排序

church / 3453人閱讀

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

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

jQuery UI - Sortable
DOM節(jié)點的移動，用起來挺好的，使用簡單，配套的組件也多。順序就直接是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的時候，嘗試拖動的時候，不會出現(xiàn)虛影，直接就是選中文字。

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

draggable事件

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

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

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

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

簡單版本

http://jsrun.net/CtkKp/edit

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91682.html

相關(guān)文章

  • 拖放排序插件Sortable.js

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

    tomorrowwu 評論0 收藏0

  • 使用 Drag and Drop 給Web應用提升交互體驗

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

    legendmohe 評論0 收藏0

  • 基于H5實現(xiàn)的react拖拽排序組件

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

    sevi_stuo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<