基于HTML5的拖动排序

church 发布于2019-08-22 11:03 / 3430人阅读

摘要：突然想到拖动这个。之前使用实例排序去实现了一个拖动排序，也有用实现的一个拖动排序。采用的方式，获取排序位置的时候需要更具，再去排序。为的时候，尝试拖动的时候，不会出现虚影，直接就是选中文字。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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