快捷導(dǎo)航

React如何使用sortablejs實(shí)現(xiàn)拖拽排序

更新時(shí)間：2023年01月16日 14:23:48 作者：逆襲的菜鳥(niǎo)X

這篇文章主要介紹了React如何使用sortablejs實(shí)現(xiàn)拖拽排序問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

React使用sortablejs實(shí)現(xiàn)拖拽排序

1、使用npm裝包

$ npm install sortablejs --save

2、引入Sortable

import Sortable from "sortablejs";

3、使用方法

<div className="grid-box" ref={this.sortableGroupDecorator}>
    {menus &&
        menus.map((item, i) => {
            return this.renderSelectedItemView(item, i);
        })}
</div>

sortableGroupDecorator = componentBackingInstance => {
    if (componentBackingInstance) {
        let options = {
            draggable: ".rows",
            // animation: "150",
            onEnd: evt => {
                let children = evt.to.children;
            }
        };
        Sortable.create(componentBackingInstance, options);
    }
};

sortablejs之強(qiáng)大的拖拽庫(kù)

Sortable.js是一款優(yōu)秀的js拖拽庫(kù)，支持ie9及以上版本ie瀏覽器和現(xiàn)代瀏覽器，也可以運(yùn)行在移動(dòng)觸摸設(shè)備中。

不依賴(lài)jQuery，支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS庫(kù)，如Bootstrap、Element UI。你可以用來(lái)拖拽div、table等元素。

Sortable.js可以實(shí)現(xiàn)同組內(nèi)上下拖動(dòng)元素，也可以實(shí)現(xiàn)不同組內(nèi)互相拖動(dòng)元素。

安裝

npm i sortablejs -S

基本示例

以下示例基于 Vue2：

<template>
  <div ref="box">
    <div data-id="a">a</div>
    <div data-id="b">b</div>
    <div data-id="c">c</div>
  </div>
</template>
 
<script>
import Sortable from 'sortablejs';
 
export default {
    mounted() {
      this.$nextTick(function() {
        this.initSortable();
      });
    },
    methods: {
      initSortable() {
        let sortable;
        // 拖動(dòng)配置
        const ops = {
            animation: 200,
            group: "name",
            // 拖動(dòng)結(jié)束
            onEnd: function (evt) {
                // 獲取拖動(dòng)后的排序，arr數(shù)組里的值是 data-id 的順序
                let arr = sortable.toArray();
                console.log({evt, arr})
            },
        };
        //初始化
        sortable = Sortable.create(this.$refs.box, ops);
      }
    },
};
</script>

常用配置

const config = {
  //一個(gè)網(wǎng)頁(yè)存在多個(gè)分組時(shí)設(shè)置，組名相同的組之間元素可以相互拖拽
  group: "name",
  //2種group寫(xiě)法選一種就可以了
  group: { 
    name: 'name',
    pull: 'clone', //克隆元素
  },
  //是否允許元素內(nèi)部排序，如果為false當(dāng)有多個(gè)排序組時(shí),多個(gè)組之間可以拖拽，本身不能拖拽（默認(rèn)true）
  sort: true,
  //是否禁用拖拽和排序
  disabled: false,
  //動(dòng)畫(huà)效果持續(xù)時(shí)間（不設(shè)置或0都沒(méi)有過(guò)渡效果）
  animation: 150,
  //點(diǎn)擊指定class類(lèi)的元素才能拖拽（比如點(diǎn)擊元素內(nèi)的圖標(biāo)才能拖拽元素，可以給圖標(biāo)設(shè)置my-handle class）
  //class可以定義在元素本身上，也可以定義在子元素上
  handle: ".my-handle",
  // class為ignore的元素不能拖動(dòng)
  filter: ".ignore",
  //含有item 類(lèi)的元素可以被拖拽（class只能定義在元素本身上）
  draggable: ".item",
  //指定獲取拖動(dòng)后排序的屬性
  dataIdAttr: 'data-id',
  //給?？课恢锰砑拥腸lass（可以給這個(gè)class定義樣式）
  ghostClass: "ghost",
  //選中元素添加的類(lèi)（包括懸浮的元素和停靠位置的元素）
  chosenClass: "chosen",
  //拖拽對(duì)象移動(dòng)時(shí)添加的類(lèi)
  dragClass: "drag",
  //禁用html5原生拖拽
  forceFallback: false,
  ...
 
  //克隆事件
  onClone: function (evt) {
      //被克隆的對(duì)象（被移到另外地方的那個(gè)元素）
      var origEl = evt.item;
      //克隆后的對(duì)象（還是在原來(lái)位置的元素）
      var cloneEl = evt.clone;
      cloneEl.innerHTML = "clone出的元素";
  },
  ...
}