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

更新時間：2023年01月16日 14:23:48 作者：逆襲的菜鳥X

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

React使用sortablejs實現(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之強大的拖拽庫

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

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

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

安裝

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;
        // 拖動配置
        const ops = {
            animation: 200,
            group: "name",
            // 拖動結(jié)束
            onEnd: function (evt) {
                // 獲取拖動后的排序，arr數(shù)組里的值是 data-id 的順序
                let arr = sortable.toArray();
                console.log({evt, arr})
            },
        };
        //初始化
        sortable = Sortable.create(this.$refs.box, ops);
      }
    },
};
</script>

常用配置

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