基于HTML5的拖动排序

2024年5月11日 170次阅读 来源: linong

好久没有写文章，不知道写什么好。突然想到拖动这个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的。本期就先写到这里了

    原文作者：linong
    原文地址: https://segmentfault.com/a/1190000009265090
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞