1.前言

<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笔记的更多相关文章

  1. js实现table排序-sortable.js

    方案一.引用sortable.js包 /* <th class="thcss" style="width: 40px;" onclick="so ...

  2. html5 Sortable.js 拖拽排序源码分析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http:// ...

  3. vuejs2.0使用Sortable.js实现的拖拽功能

    简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...

  4. 拖放排序插件Sortable.js 兼容好及功能全个人觉得比dragula.js 好的多

    经测试,Sortable.js 兼容好和使用方便都是比较不错的,特别手机端使用很棒 介绍 Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大)下载地址:https: ...

  5. Vue.Draggable：基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题

    Sortable.js 介绍 https://segmentfault.com/a/1190000008209715 项目中遇到的问题: A - 我需要在项目的拖拽组件中,使用背景 1 - 想到的第一 ...

  6. Sortable.js

    拖拽的时候主要由这几个事件完成, ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上 ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此 ...

  7. vue2.0使用Sortable.js实现的拖拽功能

    简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jQuery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...

  8. html5支持drag的拖放排序插件sortable.js

    html5支持drag的拖放排序插件sortable.js <script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.5.1/S ...

  9. Data Visualization and D3.js 笔记(1)

    课程地址: https://classroom.udacity.com/courses/ud507 什么是数据可视化? 高效传达一个故事/概念,探索数据的pattern 通过颜色.尺寸.形式在视觉上表 ...

  10. js笔记-0

    #js笔记-0 数组: indexOf方法: Array也可以通过indexOf()来搜索一个指定的元素的位置: var arr = [10, 20, '30', 'xyz']; arr.indexO ...

随机推荐

  1. SpringCloud入门（二）服务间调用和案例

    一.微服务拆分注意事项微服务拆分注意事项:1.单一职责:不同微服务,不要重复开发相同业务2.数据独立:不要访问其它微服务的数据库3.面向服务:将自己的业务暴露为接口,供其它微服务调用 1.微服务需要根 ...

  2. WPF 实现一个吃豆豆的Loading加载动画

    运行的效果如下 先引入一下我们需要的库 在nuget上面搜一下"expression.Drawing",安装一下这个包 我们再创建一个Window,引入一下这个包的命名空间 我们设 ...

  3. BOM – Cookie 和 LocalStorage

    前言 Cookie 和 LocalStorage 是非常基础的东西. 我是学编程后, 第 3 年才开始写博客的, 所以很多在第 1, 2 年学的知识完全都没有记入下来. (比如 C#, JS 语法等等 ...

  4. CSS & JS Effect – Breadcrumb Navigation 面包屑

    介绍 Breadcrumb 长这样 主要就是让用户清楚自己在哪个 page, 然后可以轻松返回上一页. Step by Step HTML <div class="container& ...

  5. “RazorTagHelper”任务意外失败。解决方案

    严重性    代码    说明    项目    文件    行    禁止显示状态错误    MSB4018    "RazorTagHelper"任务意外失败.System.I ...

  6. 基于语义增强的少样本检测，突破新类别偏见 | ICIP'24

    Few-shot目标检测(FSOD)旨在在有限标注实例的情况下检测新颖对象,在近年取得了显著进展.然而,现有方法仍然存在偏见表示问题,特别是在极低标注情况下的新颖类别.在微调过程中,一种新颖类别可能会 ...

  7. linux、unix软链接注意事项

    前言 在使用linux过程中,经常使用到软链接(类似windows快捷方式): 创建软链接之后,删除时不注意就会出现到问题 先说结论 删除软链接,确实是使用rm进行删除:但是有个小细节必须要特别注意! ...

  8. 系统编程-进程-fork深度理解、vfork简介

    1. fork基本使用 #include <unistd.h> #include <stdio.h> int main(){ pid_t pid = fork(); if(pi ...

  9. USB2.0设备的休眠挂起及远程唤醒

    USB可见设备状态,分为连接(Attached),上电(Powered),默认(Default),地址(Address),配置(Configured)和挂起(Suspended)6个状态.所谓可见,即 ...

  10. 活动预告 | 中国数据库联盟（ACDU）中国行第三站定档成都，邀您探讨数据库前沿技术

    数据库技术一直是信息时代中不可或缺的核心组成部分,随着信息量的爆炸式增长和数据的多样化,其重要性愈发凸显.作为中国数据库联盟(ACDU)的品牌活动之一,[ACDU 中国行]在线下汇集数据库领域的行业知 ...