let initTime
nextTick(() => {
initTime = setTimeout(() => {
columnDrop2()
hhSwaps()
}, 500)
function customEvent(oldIndex,newIndex) {
const $grid = xGrid.value
const { fullColumn, tableColumn } = $grid.getTableColumn()
const arr = JSON.parse(sessionStorage.getItem("rkSort"))
const currRow = fullColumn.splice(oldIndex, 1)[0]
fullColumn.splice(newIndex, 0, currRow)
$grid.loadColumn(fullColumn)
function hhSwaps() {
const arrOld = [0,1,2,3,4,5,6,7]
const arrNew = JSON.parse(sessionStorage.getItem("rkSort"))
if(arrNew != null){
for(let i = 0;i < arrNew.length; i++){
for(let j=i;j < arrNew.length; j++){
if( arrNew[i] == arrOld[i]){
break
if(arrNew[i] == arrOld[j]){
customEvent(j,i)
const old = arrOld.splice(j, 1)[0]
arrOld.splice(i, 0, old)
最近公司项目经常用到一个拖拽 Sortable.js插件，所以有空的时候看了 Sortable.js 源码，总共1300多行这样，写的挺完美的。
官网: http://rubaxa.github.io/Sortable/
拖拽的时候主要由这几个事件完成，
ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
ondrop 事件：被拖拽的元
现在很多后台列表为了方便均使用拖拽排序的功能，对列表进行随意的排序。
话不多说 ，我在网上找了一些demo，经过对比，现在把方便实用的一个demo列出来，基于jqueryUI.js
先上html代码，很简单：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>jqueryUI拖动</title>
</head>
[removed][removed]
[removed]</scrip
此js库主要用于拖动排序
接下来安装到我们的vue中： npm install sortablejs --save
我们给父级元素加一个id，用于方便获取dom元素，大致dom结构
由于是维护原有项目没办法使用数组循环，方便一点的话，大家可以使用v-for循环。
接下来在mounted中使用，在methods中定义函数：
dashDrag() {
//dash面板拖拽
let _this = this;
let $ul = document
项目开发中有个需求是需要给table 表格 增加拖拽排序功能，我使用了sortable.js 在使用过程中发现 拖拽之后 数据发生了变化，但是页面并没有更新，怀疑是table 视图渲染问题。
解决方案：
element table 中有一个属性叫 “row-key” 功能是 用来优化 Table 的渲染。
Vue 强制刷新——$forceUpdate()
项目场景：
在一个需求中，我需要实现一个拖拽的功能，其中我使用了 sortable.js 去实现，但我发现我拖拽之后的请求后台的数据并没有渲染在页面上。
简而言之，举个例子，原先的数组是 [1,2,3]，拖拽之后，变成了 [3,1,2]，但在视图上并没有显现,数据未渲染
问题描述：
估计是数据没有渲染上去
原因分析：
总结：设置key这种，就像路由不重新加载的解决方法一样，也是在ro
1.简介：
Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。你可以用来拖拽div、table等元素。
2.官网：
（1）中文文档教程：sortable.js中文文档 - itxst.comhttps://www.itxst.com/sortablejs/neuinffi.ht
当我们使用 Element el-table 组件时，需要用到拖拽排序的需求时，虽然 el-table 自带支持按列排序，但是当我们自己拖拽进行排序时，现有组件是无法满足的。
这个时候我们就需要引入一个强大的js拖拽库：SortableJS
该拖拽库简单易上手，官网提供了我们常用的拖拽效果的demo，下面我主要记录一下如何在我们的项目中快速上手使用。
安装方式分为三种：
1、npm 安装
npm install sortablejs --save
2、bower 安装
bower inst
在sortablejs中排序, 使用splice, 按照vue的触发视图的方法确实对象数组的位置都更新正确了, 但是dom元素上其他一些初始化渲染的左侧ABC序号和右侧第三列就出现删除文字的渲染既然跟着sortablejs拖拽一起移动了.
而我拿到的需求是拖拽后, 左侧ABC正常从上往下显示, 右侧删除文字也是从第三列开始显示.
解决办法如下:
// 拖拽排序
sortableFun() {
const _this = this;
let scrollTopTe...
要禁止
拖拽，你可以使用
SortableJS 提供的 disabled 选项。在 Vue 中，你可以使用 v-bind 指令来绑定
SortableJS 的配置项。以下是一个禁止
拖拽的示例：
```html
<template>
<div ref="list" v-bind:sortable="sortableOptions">
<div v-for="(item, index) in list" :key="item.id">
{{ item.text }}
<button @click="toggleDrag">Toggle Drag</button>
</template>
<script>
import Sortable from '
sortablejs';
export default {
data() {
return {
list: [
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' },
{ id: 3, text: 'Item 3' },
sortableOptions: {
disabled: true,
mounted() {
this.sortable = Sortable.create(this.$refs.list, {
onEnd: this.onSortEnd,
methods: {
onSortEnd(event) {
// update the list after sorting
const itemEl = event.item;
const newIndex = event.newIndex;
const oldIndex = event.oldIndex;
this.list.splice(newIndex, 0, this.list.splice(oldIndex, 1)[0]);
toggleDrag() {
// toggle drag and drop
this.sortable.option('disabled', !this.sortable.option('disabled'));
</script>
在上面的示例中，我们使用了
SortableJS 的 disabled 选项来禁止
拖拽。我们在组件的 data 中定义了 sortableOptions 对象，并将其绑定到
SortableJS 的配置中。然后，在 mounted 钩子函数中，我们使用
SortableJS 的 create 方法创建了一个 Sortable 实例，并将其绑定到组件的 this.sortable 变量上。最后，在 toggleDrag 方法中，我们使用
SortableJS 的 option 方法来切换 disabled 选项的值。
