js拖拽功能：如何实现页面元素的拖拽

逗爷 2023-03-09 05:08:24 249

js拖拽功能：如何实现页面元素的拖拽获取或设置选项string：命名，个人建议用元素id就行用处是为了设置可以拖放容器时使用 array：[name pull put] name：同string的方法， pull：pull用来定义从这个列表容器移动出去的设置，true/false/'clone'/function true:列表容器内的列表单元可以被移出； false：列表容器内的列表单元不可以被移出； 'clone'：列表单元移出，移动的为该元素的副本； function：用来进行pull的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否移出； put：put用来定义往这个列表容器放置列表单元的的设置，true/false/['foo' 'bar']/function true:列表容器可以从其他列表容器内放入列表单元； false：与true相反； ['foo' '

介绍

js拖拽功能：如何实现页面元素的拖拽(1)

演示地址： https://sortablejs.github.io/Sortable/

Github：https://github.com/SortableJS/Sortable

SortableJS是一款用于在现代浏览器和触摸设备上的拖拽插件，不需要jQuery，但支持jQuery 支持Meteor，AngularJS，React，Polymer，Vue，Knockout和任何CSS库，例如Bootstrap。

特性

支持触屏设备和大部分浏览器，不支持IE9以下
可以从一个列表容器中拖拽一个列表单元到其他容器或本列表容器中进行排序
拖拽列表有动画效果
支持拖动手柄（小手）和可选文本
智能自动滚动
高级交换检测
使用原生HTML5拖放API构建
支持Meter、Angular、React、Knockout、Polymer、Vue
支持任意CSS库，如BootStrap
简单的API
CDN服务
不依赖jQuery(但支持jQuery)

安装

通过npm

npm install sortablejs --save

通过bower

bower install --save sortablejs 用法

<ul id="items"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> var el = document.getElementById('items'); var sortable = Sortable.create(el);

备注：不仅仅是可以使用ul/li，比如div等

官方配置

js拖拽功能：如何实现页面元素的拖拽(2)

根据官网文档简单介绍下：

group：字符串或对象

string：命名，个人建议用元素id就行用处是为了设置可以拖放容器时使用 array：[name pull put] name：同string的方法， pull：pull用来定义从这个列表容器移动出去的设置，true/false/'clone'/function true:列表容器内的列表单元可以被移出； false：列表容器内的列表单元不可以被移出； 'clone'：列表单元移出，移动的为该元素的副本； function：用来进行pull的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否移出； put：put用来定义往这个列表容器放置列表单元的的设置，true/false/['foo' 'bar']/function true:列表容器可以从其他列表容器内放入列表单元； false：与true相反； ['foo' 'bar']：这个可以是一个字符串或者是字符串的数组，代表的是group配置项里定义的name值； function：用来进行put的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否放入；

sort：boolean 定义是否列表单元是否可以在列表容器内进行拖拽排序
delay：number 定义鼠标选中列表单元可以开始拖动的延迟时间；
disabled：boolean 定义是否此sortable对象是否可用，为true时sortable对象不能拖放排序等功能，为false时为可以进行排序，相当于一个开关；
animation：number 单位：ms，定义排序动画的时间；
handle：selector 格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动；
filter：selector 格式为简单css选择器的字符串，定义哪些列表单元不能进行拖放，可设置为多个选择器，中间用“，”分隔；
draggable：selector 格式为简单css选择器的字符串，定义哪些列表单元可以进行拖放
ghostClass：selector 格式为简单css选择器的字符串，当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况，此配置项就是来给这个影子单元添加一个class，我们可以通过这种方式来给影子元素进行编辑样式；
chosenClass：selector 格式为简单css选择器的字符串，当选中列表单元时会给该单元增加一个class；
forceFallback：boolean 如果设置为true时，将不使用原生的html5的拖放，可以修改一些拖放中元素的样式等；
fallbackClass：string 当forceFallback设置为true时，拖放过程中鼠标附着单元的样式；
scroll：boolean 默认为true，当排序的容器是个可滚动的区域，拖放可以引起区域滚动
事件：
onChoose：function 列表单元被选中的回调函数
onStart：function 列表单元拖动开始的回调函数
onEnd：function 列表单元拖放结束后的回调函数
onAdd：function 列表单元添加到本列表容器的回调函数
onUpdate：function 列表单元在列表容器中的排序发生变化后的回调函数
onRemove：function 列表元素移到另一个列表容器的回调函数
onFilter：function 试图选中一个被filter过滤的列表单元的回调函数
onMove：function 当移动列表单元在一个列表容器中或者多个列表容器中的回调函数
onClone：function 当创建一个列表单元副本的时候的回调函数

事件对象

to：HTMLElement–移动到列表容器
from：HTMLElement–来源的列表容器
item：HTMLElement–被移动的列表单元
clone：HTMLElement–副本的列表单元
oldIndex：number/undefined–在列表容器中的原序号
newIndex：number/undefined–在列表容器中的新序号

move 事件对象：

to:HTMLElement
from:HTMLElement
dragged:HTMLElement
draggedRect:DOMRect
related:HTMLElement — element on which have guided
relatedRect:DOMRect
willInsertAfter:Boolean — true if will element be inserted after target (or false if before)

方法