vue 实现行拖拽，不满足条件时可还原数据_vue draggable 不满足条件还原

项目中安装sortablejs

npm i sortablejs
在要使用拖拽的组件进行引用
 
import Sortable from "sortablejs";
拖拽条件判断
 
首先我们需要设置 forceFallback: false (设置了这个，才能达到条件不满足，还原数据的效果)
 在onMove中进行条件判断，如果不满足条件，进行 return false。
 在onMove事件中，evt.dragged 是被拖拽的元素，evt.related是要交换的目标元素，拿到两个元素的rowIndex，就能在数组中获取对应的两条数据，即可进行条件判断等操作 
// 初始化拖拽排序
    initSort() {
      // 这里的字符串可以修改，可以自己设置对应要去找的元素标签
      const selector = " .el-table__body-wrapper > table > tbody";
      const el = document.querySelectorAll(selector)[0];
      let that = this;
      let state = true; // 判断是否满足拖拽交换的条件
      // 根据具体需求配置options配置项
      this.dragIns = new Sortable(el, {
        forceFallback: false, //这是还原数据必要的设置
        // disabled: true,
        // setData(dataTransfer, dragEl) {
        //   dataTransfer.setData('Text', dragEl.textContent);
        // },
        onMove(evt) {
          // 如果不符合判断条件，进行还原交换
          // 这里是我自己的条件判断，你可以根据自己需要判断的情况进行编写
          // 记得若不满足条件，则进行 return false
          // 记得上面需要设置 forceFallback: false
          if (that.sortKey.length > 0) {
            for (let i = 0; i < that.sortKey.length; i++) {
              if (Array.isArray(that.tableData[evt.dragged.rowIndex][that.sortKey[i]])) {
                if (
                  JSON.stringify(that.tableData[evt.dragged.rowIndex][that.sortKey[i]]) !=
                  JSON.stringify(that.tableData[evt.related.rowIndex][that.sortKey[i]])
                  state = false;
                  return false;
              } else {
                if (
                  that.tableData[evt.dragged.rowIndex][that.sortKey[i]] !=
                  that.tableData[evt.related.rowIndex][that.sortKey[i]]
                  state = false;
                  return false;
        onEnd: (evt) => {
          if (!state) {
            state = true;
            that.$message.warning("我是提示信息");
            return;
          // 监听拖动结束事件
          const newIndex = evt.newIndex;
          const oldIndex = evt.oldIndex;
          const targetRow = this.tableData.splice(oldIndex, 1)[0];
          this.tableData.splice(newIndex, 0, targetRow);
      });
    // 销毁拖拽排序实例
    stopDrag() {
      this.dragIns.destroy();
点击前往Sortable.js中文网|配置，查看完整配置参数
 
Sortable.js中文网|配置
                    本篇文章主要是想记录拖拽时进行条件判断，若条件不满足则数据不变（还原数据）的情况。这个条件判断、还原数据的方法，我也是在网上查询总结出的，发现这方面的东西不好找，自己做个记录，方便以后查询在要使用拖拽的组件进行引用js代码拖拽条件判断首先我们需要设置  forceFallback: false (设置了这个，才能达到条件不满足，还原数据的效果)在onMove中进行条件判断，如果不满足条件，进行 return false。......
我司产品提出了一个需求，做一个数据基于Echars的可拖拽缩放的数据可视化，上网百度了一番，结果出现了两种结局，一种花钱买成熟产品（公司不出钱），一种没有成熟代码，只能自己写了，故事即将开始，敬请期待……。  不，还是先上一张效果图吧，请看……
前期知识点
1. offset（偏移量）
定义：当前元素在屏幕上占用的空间，如下图：
offsetHeight: 该元素在垂直方向上的占用的空间，单位为px，不包括margin。
offsetWidth：该元素在水平方向上的占用空间，单位为px，不包括margin。
offsetLeft: 该元素距离左侧并且是定位过（relati
				vuedraggable 是一款拖拽元素的插件。
插件地址：https://www.npmjs.com/package/vuedraggable
插件使用起来还是很简单的，官网给出了例子：
&lt;draggable v-model="myArray" :options="{group:'people'}" @start="drag=true" @end="drag=false"&gt;
				代码如图，我想实现个表格拖拽行排序的功能，拖拽完后复原怎么办？比如，第一行内容是aaa，第二行内容是bbb，我想把bbb拖到第一行，等我拖完后松开鼠标，bbb又回到第二行了，但是绑定的list2已经变了，就是显示的内容没变，怎么解决
<draggable v-model="list2" @update="onSort" :options="{animation:500}">
  &lt...
				关于vue的draggable拖拽插件滚动后拖拽会出现影子与鼠标位置不同的问题
我遇到这个问题，满怀激动的在网上找资料，竟然如同全世界就我遇到这个问题一样，好吧，hhh
解决办法如下
问题产生：forceFallback=“true”，是这个属性设置的问题，这一步相当于不使用h5原生拖拽，h5拖拽是方便，但是呢，拖拽的影子改不了透明度是硬伤。设置之后，就会滚动后影子与鼠标位置偏离，你越往下滚动呢，这个偏离位置越大，我并不知道怎么取拿影子，所以一直在网上找资料，然后啥也没找到就是了.
通过配置@start=
				对于vue实现可拖拽宽度的菜单，可以使用vuedraggable插件和vue-resizable插件。
vuedraggable插件可以实现拖拽排序的功能，而vue-resizable插件可以实现拖拽改变元素大小的功能。
以下是一个简单的实现示例：
1. 安装vuedraggable和vue-resizable插件
npm install vuedraggable vue-resizable
2. 在组件中引入插件并初始化
<template>
  <div class="menu">
    <vue-draggable v-model="menuItems">
      <div v-for="(item, index) in menuItems" :key="index" class="menu-item">
        <vue-resizable :resizable="true" :on-resize-stop="resize" :max-width="200" :min-width="100">
          {{ item }}
        </vue-resizable>
    </vue-draggable>
</template>
<script>
import draggable from 'vuedraggable'
import resizable from 'vue-resizable'
export default {
  components: {
    'vue-draggable': draggable,
    'vue-resizable': resizable
  data () {
    return {
      menuItems: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
  methods: {
    resize (event) {
      console.log(event)
</script>
在上面的代码中，使用了vuedraggable组件来包裹菜单项，使用了vue-resizable组件来包裹每个菜单项，并设置了最大和最小宽度，并在on-resize-stop事件中调用了resize方法。
3. 样式设置
为了使菜单项可拖拽和可改变大小，需要为其设置一些基本样式：
.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
.menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
  padding: 10px;
  background-color: #ccc;
  border: 1px solid #000;
  cursor: move;
在上面的样式中，设置了菜单项为flex布局，并设置了一些基本样式，如背景色、边框等。
这样就可以实现一个简单的可拖拽和可改变大小的菜单了。