Sortable.js笔记
1.前言
- SortableJS是功能强大的JavaScript 拖拽库，更多配置项：Sortable.js中文网|配置
- 引入插件
<script src="https://cdn.bootcdn.net/ajax/libs/Sortable/1.14.0/Sortable.js"></script>
- 个人理解：对传入Dom容器的子元素进行事件监听（事件委托），自动完成子元素位置的转换，并提供相关配置项和钩子函数来控制拖拽
2.基本使用
- 插件初始化时，需要传入一个Dom元素
- 初始化完毕后，这个Dom元素的直接子元素就可以被拖拽（例如：你想拖拽li元素，你就应该传入一个ul元素，如果你想拖拽表格行tr，你就应该传入tbody元素）
<body>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>李四</td>
<td>24</td>
</tr>
<tr>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>赵六</td>
<td>-</td>
</tr>
</tbody>
</table>
</body>
<script src="./libs/Sortable.js"></script>
<script>
window.onload = function(){
//拖拽实例化
var el = document.querySelector(('.table tbody'))
var sortable = new Sortable(el,{})
}
</script>
3.触发区域
- 默认情况下，子元素所有的区域都可以触发拖拽，可以使用handle和filter字段来控制哪些元素可以触发拖拽
- handle可以设置样式 cursor: move
| 字段名称 | 数据类型 | 说明 |
|---|---|---|
| handle | string | 通过设定元素选择器，来指定哪些元素可以触发拖拽 |
| filter | string | 通过设定元素选择器，来指定哪些元素不可以触发拖拽，优先级高于handle |
4.实例方法
| 方法名 | 参数 | 说明 |
|---|---|---|
| destroy | 无 | 销毁实例，意味着无法再进行拖拽操作 |
| option | (name,value) | 刷新option配置 |
var el = document.querySelector(('.table tbody'))
//保存当前实例
var instance = new Sortable(el, {})
//销毁整个实例
instance.destroy()
//禁止整个实例进行拖拽
instance.option('disabled', true)
//允许整个实例进行拖拽
instance.option('disabled', false)
5.实际运用
- Sortable.js初始化时，要确保传入的Dom能够读取到
- Sortable.js在进行事件监听时，使用的是事件委托，所以如果传入的el元素未发生改变，则无需再次进行初始化
- 拖拽完毕后，Sortable.js更新了视图，但是Vue中的数据并没有同步，需要在onEnd()回调中对数据进行排序处理
- 一般而言，在对Vue的数据进行排序处理时，不要让其触发视图更新（Sortable.js已经更新过视图，没必要重复更新）
<body>
<div id="app">
<div class="inner-box" v-cloak>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list" :key="index">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td><span class="glyphicon glyphicon-screenshot drag-btn"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
list: [
{ name: "张三", age: 23, can_replace: true }, { name: "李四", age: 24, can_replace: true },
{ name: "王五", age: 25, can_replace: true }, { name: "此行禁止被替换", age: "-", can_replace: false }
],
sortable: null,//拖拽实例
},
mounted() {
//拖拽实例化
var that = this
var el = document.querySelector(('.table tbody'))
this.sortable = new Sortable(el, {
handle: ".drag-btn",
// 开始拖拽的时候
onStart: function (evt) {
},
// 拖拽移动的时候
onMove: function (evt) {
//如果要禁止此次
},
// 结束拖拽
onEnd: function ({ oldIndex, newIndex }) {
//对数据重新进行排序，单不触发视图更新
var oldItem = that.list[oldIndex]
var newItem = that.list[newIndex]
that.list[oldIndex] = newItem
that.list[newIndex] = oldItem
},
})
},
methods: {
//刷新列表
setList() {
//列表是与tr元素绑定的，不会影响到tbody元素，所以这里数据发生改变时，Sortable无需再次执行初始化
this.list = [
{ name: "张三2", age: 23, can_replace: true }, { name: "李四2", age: 24, can_replace: true },
{ name: "王五2", age: 25, can_replace: true }, { name: "此行禁止被替换2", age: "-", can_replace: false },
{ name: "百度水电费", age: "-", can_replace: false }
]
},
}
})
</script>
Sortable.js笔记的更多相关文章
- js实现table排序-sortable.js
方案一.引用sortable.js包 /* <th class="thcss" style="width: 40px;" onclick="so ...
- html5 Sortable.js 拖拽排序源码分析
最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http:// ...
- vuejs2.0使用Sortable.js实现的拖拽功能
简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...
- 拖放排序插件Sortable.js 兼容好及功能全个人觉得比dragula.js 好的多
经测试,Sortable.js 兼容好和使用方便都是比较不错的,特别手机端使用很棒 介绍 Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大)下载地址:https: ...
- Vue.Draggable：基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题
Sortable.js 介绍 https://segmentfault.com/a/1190000008209715 项目中遇到的问题: A - 我需要在项目的拖拽组件中,使用背景 1 - 想到的第一 ...
- Sortable.js
拖拽的时候主要由这几个事件完成, ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上 ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此 ...
- vue2.0使用Sortable.js实现的拖拽功能
简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jQuery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...
- html5支持drag的拖放排序插件sortable.js
html5支持drag的拖放排序插件sortable.js <script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.5.1/S ...
- Data Visualization and D3.js 笔记(1)
课程地址: https://classroom.udacity.com/courses/ud507 什么是数据可视化? 高效传达一个故事/概念,探索数据的pattern 通过颜色.尺寸.形式在视觉上表 ...
- js笔记-0
#js笔记-0 数组: indexOf方法: Array也可以通过indexOf()来搜索一个指定的元素的位置: var arr = [10, 20, '30', 'xyz']; arr.indexO ...
随机推荐
- Google Maps Embed API & JavaScript API
前言 很多年前写过一篇 Google Map 谷歌地图, 这篇算是翻新版本. Google Map Registration Google Maps Platform 是整个 Google Map 的 ...
- Identity – 安全基础知识
前言 一旦涉及到用户, 那么安全就上一个层次了. 这篇主要是说说一些安全的基础 用户密码保存 网络上有太多资料说这些基础了, 我就不拉过来了. 大致记入一些重点就好了. - 为什么不可以明文保存 因为 ...
- SQL Server – Temporal Table 时态表
前言 之前写过一篇, 但那个时候还没有开始用, 现在是要用了, 所以翻新一下呗. SQL server temporal table 学习笔记 主要参考: 官网 Temporal tables [译] ...
- HTML – Naming Conversion
有些是市场的规范, 有些是我的规范 Tag Name Lower Case 参考: W3Schools Attributes Name Lower Case 参考: W3Schools Always ...
- Nuxt Kit 中的布局管理
title: Nuxt Kit 中的布局管理 date: 2024/9/18 updated: 2024/9/18 author: cmdragon excerpt: 摘要:本文详述了在Nuxt.js ...
- K8S命名空间处于Terminating状态，如何强制删除
一.现象 当删除命名空间后,发现该空间一直处于Terminating状态 [root@imanager-beta-arm-21756-5g5ap ~]# kubectl get ns NAME STA ...
- 从0到1搭建权限管理系统系列四 .net8 中Autofac的使用（附源码）
说明 该文章是属于OverallAuth2.0系列文章,每周更新一篇该系列文章(从0到1完成系统开发). 该系统文章,我会尽量说的非常详细,做到不管新手.老手都能看懂. 说明:OverallAuth2 ...
- 多款国产操作系统安装数据库干货文档汇总（含Oracle/MySQL/国产数据库等）
随着国产化的逐步推进,越来越多的企业选择将数据库安装在国产操作系统上.为帮助大家了解国产操作系统上的数据库成功搭建案例与搭建方式,本文整理了墨天轮数据技术社区上用户分享的实操文档,涵盖银河麒麟.中标麒 ...
- 解密prompt系列40. LLM推理scaling Law
OpenAI的O-1出现前,其实就有已经有大佬开始分析后面OpenAI的技术路线,其中一个方向就是从Pretrain-scaling,Post-Train-scaling向Inference Scal ...
- 如何集成化管理API_方便企业内外部调用？
API 已成为企业数字战略中不可或缺的一部分.它们使不同软件系统.应用程序和服务之间能够高效.灵活地相互沟通.API不仅能提升企业内部各部门之间的协作效率,还能加强与外部合作伙伴及客户之间的互动. A ...