SortableJS的简单使用

最新推荐文章于 2024-05-08 17:04:32 发布

何嘉烟

最新推荐文章于 2024-05-08 17:04:32 发布

阅读量2.4k

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/The_more_more/article/details/125954811

版权

SortableJS的简单使用

前言

在台管理项目面可能会涉及到一些模块的拖拽使用，在github上发现一个挺不错的拖拽js库，很好的满足了我们在项目开发的需要，支持Vue和React，记录一下SortableJS的简单使用。

使用方法介绍

SortableJs有着中文网的介绍：http://www.sortablejs.com/

里面也介绍了该库的一些特性，中文网的页面十分简约方便阅读，有着满足我们需要的示例介绍，只有几个页面，在配置项一栏列举了很多的方法，下面就在html里面实现一下简单的demo。

示例

一、在HTML里面实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .container {
      width: 300px;
      height: 300px;
      margin: 50px auto;
      background-color: red;
      padding: 20px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

    .container>div {
      height: 20%;
      text-align: center;
      line-height: 52px;
      width: 100%;
      background-color: blue;
    }
  </style>
</head>

<body>
  <div class="container">
    <div>第一个盒子</div>
    <div>第二个盒子</div>
    <div>第三个盒子</div>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
  <script>
    let el = document.querySelector('.container')
    //初始化
    var sortable = Sortable.create(el, {
      animation: 200,
      group: "name",
      sort: true
    });
  </script>
</body>

</html>

在网页方面使用了cdn的引入，在初始化的使用需要调用Sortable.create()方法，这里我们需要传入的第一个值就是我们包裹的盒子容器，第二个值就是我们所需要的配置项，通过对一些属性的配置，打开页面就可以展示出大容器container内部的三个盒子的拖拽了，可以相互改变位置了。

二、在Vue里面实现

在一个干净的Vue2.x面书写示例代码如下：

<template>
  <div class="container" ref="container">
    <div v-for="(item, index) in dataArr" :key="`floor_${index}`">
      <span>{{ item }}</span>
    </div>
  </div>
</template>

<script>
import Sortable from 'sortablejs'
export default {
  data() {
    return {
      dataArr: ['第一个盒子', '第二个盒子', '第三个盒子', '第四个盒子']
    }
  },
  mounted() {
    this.row()
  },
  methods: {
    row() {
      this.$nextTick(() => {
        const el = this.$refs.container
        Sortable.create(el, {
          animation: 200,
          group: 'name',
          sort: true
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}

.container {
  width: 300px;
  height: 300px;
  margin: 50px auto;
  background-color: red;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  div {
    height: 20%;
    text-align: center;
    line-height: 52px;
    width: 100%;
    background-color: blue;
  }
}
</style>

展示的效果和之前一样，报错的话修改style即可，这是使用了less，根据官网的实例找到我们需要的配置，结合配置来调修改即可

常用配置解析

  const op = {
      group: 'name',
      // string：命名，个人建议用元素id就行,用处是为了设置可以拖放容器时使用，在array中的put的设置中再做介绍；
      // object：{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: true,
      // boolean 定义是否列表单元是否可以在列表容器内进行拖拽排序；
      delay: 0,
      // number 定义鼠标选中列表单元可以开始拖动的延迟时间；
      disabled: false,
      // boolean 定义是否此sortable对象是否可用，为true时sortable对象不能拖放排序等功能，为false时为可以进行排序，相当于一个开关；
      animation: 500,
      // number 单位：ms，定义排序动画的时间；
      handle: 'container',
      // selector 格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动；
      filter: '.btn',
      // class为btn的元素不能拖动,selector 格式为简单css选择器的字符串，定义哪些列表单元不能进行拖放，可设置为多个选择器，中间用“，”分隔；
      draggable: '.btn1',
      // selector 格式为简单css选择器的字符串，定义哪些列表单元可以进行拖放
      ghostClass: 'ghost',
      // 给停靠位置添加的class,selector 格式为简单css选择器的字符串，当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况，此配置项就是来给这个影子单元添加一个class，我们可以通过这种方式来给影子元素进行编辑样式；
      chosenClass: 'chosen',
      // 选中元素添加的类,selector 格式为简单css选择器的字符串，当选中列表单元时会给该单元增加一个class；
      forceFallback: false,
      // boolean 如果设置为true时，将不使用原生的html5的拖放，可以修改一些拖放中元素的样式等；
      fallbackClass: true,
      // boolean 当forceFallback设置为true时，拖放过程中鼠标附着单元的样式；
      scroll: true,
      // boolean 默认为true，当排序的容器是个可滚动的区域，拖放可以引起区域滚动
      /*
        事件
      */
      // onChoose:function    列表单元被选中的回调函数
      // onStart:function    列表单元拖动开始的回调函数
      // onEnd:function    列表单元拖放结束后的回调函数
      // onAdd:function    列表单元添加到本列表容器的回调函数
      // onUpdate:function    列表单元在列表容器中的排序发生变化后的回调函数
      // onRemove:function    列表元素移到另一个列表容器的回调函数
      // onFilter:function    试图选中一个被filter过滤的列表单元的回调函数
      // onMove:function    当移动列表单元在一个列表容器中或者多个列表容器中的回调函数
      // onClone:function    当创建一个列表单元副本的时候的回调函数
      /*
        方法
      */
      // option(name[,value])
      // 获得或者设置项参数，使用方法类似于jQuery用法，没有第二个参数为获得option中第一个参数所对应的值，有第二个参数时，将重新赋给第一个参数所对应的值；
      // toArray()
      // 序列化可排序的列表单元的data-id（可通过配置项中dataIdAttr修改）放入一个数组，并返回这个数组中
      // sort()
      // 通过自定义列表单元的data-id的数组对列表单元进行排序
    }

何嘉烟

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
SortableJS的简单使用

SortableJshttp里面也介绍了该库的一些特性，中文网的页面十分简约方便阅读，有着满足我们需要的示例介绍，只有几个页面，在配置项一栏列举了很多的方法，下面就在html里面实现一下简单的demo。...
复制链接

扫一扫