sortablejs 拖拽库

已于 2024-05-29 11:58:55 修改
阅读量401 收藏 7
点赞数 10
文章标签： javascript vue.js 前端
于 2023-11-29 18:20:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51757896/article/details/134696361
版权

sortablejs 库

列表拖拽
<template>
  <el-scrollbar height="500px">
    <div id="draggableCard">
      <el-card v-for="i in resultDate" :key="i">
        {{ i }}
      </el-card>
    </div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import {ref,onMounted} from 'vue'
import Sortable from "sortablejs";
const resultDate = ref([1,2,3,4,5]);
onMounted(() => {
  Sortable.create(document.getElementById("draggableCard"), {
    animation: 150,
    onEnd: ({ newIndex, oldIndex }) => {
      const currRow = resultDate.value.splice(oldIndex, 1);
      resultDate.value.splice(newIndex, 0, currRow[0]);
    },
  });
});
</script>
双列表拖拽
<template>
  <div>
    <div class="flex">
      <div class="list" ref="l1">
        {{ list1 }}
        <el-card v-for="(i, index) in list1" :key="i.label">
          {{ index }}-{{ i.label }}
        </el-card>
      </div>
      <div class="list" ref="l2">
        {{ list2 }}
        <el-card v-for="(i, index) in list2" :key="i.label">
          {{ index }}-{{ i.label }}
        </el-card>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import Sortable from "sortablejs";
import { ref, reactive, onMounted } from "vue";
import { cloneDeep } from "lodash";

const list1 = reactive([
  {
    label: "姓名",
    prop: "name",
  },
  {
    label: "性别",
    prop: "gender",
  },
  {
    label: "年龄",
    prop: "age",
  },
  {
    label: "操作",
    prop: "operation",
  },
]);
const list2 = reactive([]);
const l1 = ref();
const l2 = ref();

onMounted(() => {
  sortList();
});

const isMove = ref(true); // 判断是否移动
const sortList = () => {
  Sortable.create(l1.value, {
    group: { name: "card", pull: true, put: true },
    onEnd({ newIndex, oldIndex }) {
      if (isMove.value) {
        const currRow = list1.splice(oldIndex, 1)[0];
        list2.splice(newIndex, 0, currRow);
      } else {
        const currRow = list1.splice(oldIndex, 1)[0];
        list1.splice(newIndex, 0, currRow);
      }
    },
    onUpdate() {
      isMove.value = false;
    },
    onMove() {
      isMove.value = true;
    },
  });
  Sortable.create(l2.value, {
    group: { name: "card", pull: true, put: true },
    onEnd({ newIndex, oldIndex }) {
      if (isMove.value) {
        const currRow = list2.splice(oldIndex, 1)[0];
        list1.splice(newIndex, 0, currRow);
      } else {
        const currRow = list2.splice(oldIndex, 1)[0];
        list2.splice(newIndex, 0, currRow);
      }
    },
    onUpdate() {
      isMove.value = false;
    },
    onMove() {
      isMove.value = true;
    },
  });
};

// targetList 为空 奇怪
const dragOption = (name, currentList, targetList) => {
  return {
    group: { name, pull: true, put: true },
    animation: 150,
    onUpdate() {
      isMove.value = false;
    },
    onMove() {
      isMove.value = true;
    },
    onEnd: ({ newIndex, oldIndex }) => {
      if (isMove.value) {
        const currRow = currentList.splice(oldIndex, 1)[0];
        targetList.splice(newIndex, 0, currRow);
      } else {
        const currRow = currentList.splice(oldIndex, 1)[0];
        currentList.splice(newIndex, 0, currRow);
      }
      console.log("当前列表", currentList);
    },
  };
};
</script>

<style lang="scss" scoped>
.list {
  height: 500px;
  width: 300px;
  border: 1px solid black;
}
</style>
表格拖拽
<template>
    <div class="draggable" style="padding: 20px">
        <el-table
                row-key="id"
                :data="state.tableData"
                style="width: 100%"
        >
            <el-table-column
                    v-for="(item,index) in state.oldList"
                    :key="`col_${index}`"
                    :prop="state.newList[index].prop"
                    :label="item.label"
                    align="center"
            >
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup>
import Sortable from 'sortablejs';
import { reactive, onMounted} from 'vue';

const state = reactive({
    oldList: [],
    newList: [],
    tableData: [
        {
            id:1,
            name:'李四',
            gender:'男',
            age:20,
        },
        {
            id:2,
            name:'王五',
            gender:'未知',
            age:18,
        },
        {
            id:3,
            name:'张三',
            gender:'男',
            age:22,
        },
        {
            id:4,
            name:'张三',
            gender:'男',
            age:22,
        },
    ],
    tableConfig: {
        tableItems: [
            {
                label: '姓名',
                prop: 'name',
            },
            {
                label: '性别',
                prop: 'gender',
            },
            {
                label: '年龄',
                prop: 'age',
            },
        ]
    }
    
})
// 行拖拽
const rowDrop = function () {
    // 要拖拽元素的父容器
    const tbody = document.querySelector('.draggable .el-table__body-wrapper tbody');
    Sortable.create(tbody, {
        //  可被拖拽的子元素
        draggable: ".draggable .el-table__row",
        onEnd({newIndex, oldIndex}) {
            const currRow = state.tableData.splice(oldIndex, 1)[0];
            state.tableData.splice(newIndex, 0, currRow);
            console.log('tableData',state.tableData);
        }
    });
}
// 列拖拽
const columnDrop = function() {
    const wrapperTr = document.querySelector('.draggable .el-table__header-wrapper tr');
    Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
            const oldItem = state.newList[evt.oldIndex];
            state.newList.splice(evt.oldIndex, 1);
            state.newList.splice(evt.newIndex, 0, oldItem);
        }
    });
}
onMounted(()=> {
    state.oldList = JSON.parse(JSON.stringify(state.tableConfig.tableItems))
    state.newList = JSON.parse(JSON.stringify(state.tableConfig.tableItems))
    columnDrop()
    rowDrop()
})
</script>
表格禁止拖拽到第一行
<template>
    <div class="draggable" style="padding: 20px">
        <el-table
                :row-class-name="rowClassName"
                row-key="id"
                :data="state.tableData"
                style="width: 100%"
        >
            <el-table-column
                    v-for="(item,index) in state.oldList"
                    :key="`col_${index}`"
                    :prop="state.newList[index].prop"
                    :label="item.label"
                    align="center"
            >
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup>
import Sortable from 'sortablejs';
import { reactive, onMounted} from 'vue';

const state = reactive({
    oldList: [],
    newList: [],
    tableData: [
        {
            id:1,
            name:'李四',
            gender:'男',
            age:20,
        },
        {
            id:2,
            name:'王五',
            gender:'未知',
            age:18,
        },
        {
            id:3,
            name:'张三',
            gender:'男',
            age:22,
        },
        {
            id:4,
            name:'张三',
            gender:'男',
            age:22,
        },
    ],
    tableConfig: {
        tableItems: [
            {
                label: '姓名',
                prop: 'name',
            },
            {
                label: '性别',
                prop: 'gender',
            },
            {
                label: '年龄',
                prop: 'age',
            },
        ]
    }
    
})
const rowClassName = ({ row, rowIndex }) => {
    // 为除了第一行外的所有行添加额外样式
    return rowIndex !== 0 ? 'el-table__row__drag' : '';
 }
// 行拖拽
const rowDrop = function () {
    // 要拖拽元素的父容器
    const tbody = document.querySelector('.draggable .el-table__body-wrapper tbody');
    Sortable.create(tbody, {
        //  可被拖拽的子元素
        draggable: ".draggable .el-table__row__drag",    // 修改可拖拽元素
        onEnd({newIndex, oldIndex}) {
            const currRow = state.tableData.splice(oldIndex, 1)[0];
            state.tableData.splice(newIndex, 0, currRow);
            console.log('tableData',state.tableData);
        }
    });
}
// 列拖拽
const columnDrop = function() {
    const wrapperTr = document.querySelector('.draggable .el-table__header-wrapper tr');
    Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
            const oldItem = state.newList[evt.oldIndex];
            state.newList.splice(evt.oldIndex, 1);
            state.newList.splice(evt.newIndex, 0, oldItem);
        }
    });
}
onMounted(()=> {
    state.oldList = JSON.parse(JSON.stringify(state.tableConfig.tableItems))
    state.newList = JSON.parse(JSON.stringify(state.tableConfig.tableItems))
    columnDrop()
    rowDrop()
})
</script>
穿梭框拖拽
<template>
  <div class="transfer" ref="transfer">
    <el-transfer v-model="value" :data="data" :titles="titles">
      <template #default="{ option }">
        <div class="pannel-content">
          <span :draggable="!option.disabled" @dragstart="drag($event, option)">{{
            option.label
          }}</span>
        </div>
      </template>
    </el-transfer>
  </div>
</template>

<script lang="ts" setup>
import Sortable from "sortablejs";
import { ref, onMounted} from "vue";

const data = ref([
  {
    key: 1,
    label: `身份证取号`,
    disabled: false,
  },
  {
    key: 2,
    label: `人脸取号`,
    disabled: false,
  },
  {
    key: 3,
    label: `亮码取号`,
    disabled: false,
  },
  {
    key: 4,
    label: `人证比对取号`,
    disabled: false,
  },
]);

const titles = ref(["待选列表", "已选列表"]);

const value = ref([] as any);
const draggingKey = ref(null as any);
const transfer = ref<HTMLDivElement | null>(null);
const drag = (ev: DragEvent, option: any) => {
  draggingKey.value = option.key;
};
onMounted(() => {
  const leftPanel = transfer?.value
    ?.getElementsByClassName("el-transfer-panel")[0]
    .getElementsByClassName("el-transfer-panel__body")[0] as any;
  const rightPanel = transfer?.value
    ?.getElementsByClassName("el-transfer-panel")[1]
    .getElementsByClassName("el-transfer-panel__body")[0] as any;
  const leftEl = leftPanel?.getElementsByClassName("el-transfer-panel__list")[0];
  const rightEl = rightPanel?.getElementsByClassName("el-transfer-panel__list")[0];
  Sortable.create(rightEl, {
    onEnd: (evt: any) => {
      const { oldIndex, newIndex } = evt;
      const temp = value.value[oldIndex];
      if (!temp || temp === "undefined") return; // 解决右边最后一项从右边拖左边，有undefined的问题
      value.value[oldIndex] = value.value[newIndex];
      value.value[newIndex] = temp;
    },
  });
  Sortable.create(leftEl, {
    onEnd: (evt: any) => {
      const { oldIndex, newIndex } = evt;
      if (oldIndex === newIndex) return;
      const temp = data.value[oldIndex];
      if (!temp || (temp as any) === "undefined") return; // 解决右边最后一项从右边拖左边，有undefined的问题
      data.value[oldIndex] = data.value[newIndex];
      data.value[newIndex] = temp;
    },
  });
  leftPanel.ondragover = (ev: any) => {
    ev.preventDefault();
  };
  leftPanel.ondrop = (ev: any) => {
    ev.preventDefault();
    const index = value.value.indexOf(draggingKey.value);
    if (index !== -1) {
      value.value.splice(index, 1);
    }
  };
  rightPanel.ondragover = (ev: any) => {
    ev.preventDefault();
  };
  rightPanel.ondrop = (ev: any) => {
    ev.preventDefault();
    if (value.value.indexOf(draggingKey.value) === -1) {
      value.value.push(draggingKey.value);
    }
  };
});
</script>
<style scoped lang="scss">
:deep(.el-transfer__button) {
  width: 30px;
}
</style>
Deja.vu
关注
  • 10
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
sortablejs库
12-16
**SortableJS库详解** 在前端开发中，数据排序是一个常见的需求，无论是表格数据还是其他形式的数据展示，用户可能需要按照不同标准对数据进行排列。SortableJS是一个轻量级、无依赖的JavaScript库，专为实现拖放...
多列拖拽排序智能滚动
01-16
"多列拖拽排序智能滚动"是一种提升用户体验的技术，它允许用户通过拖放操作对多列数据进行排序，同时在拖动过程中，如果接近屏幕边缘，页面会自动滚动，确保用户能持续看到可操作区域。这个功能的实现主要依赖于...
JS实现拖拽功能
热门推荐
weixin_46831501的博客
03-04 1万+
记录一下新学习到的拖拽功能。 H5新增了一个draggable属性，用于对需要拖拽的元素进行标记，定义了这个属性后就可以定义拖拽事件了。拖拽事件如下图： 接着就是上代码： HTML以及CSS部分：比较简单就不多说了 <div class="wrapper"> <section class="show"> <h1>拖动你喜欢的图片</h1> <div class="tshirt"> <img s
如何使用js实现拖拽效果？
黄彪博客
11-28 2359
因为设置了拖拽属性的元素就可以被拖拽，结束拖拽的时候获取一下鼠标与页面的距离，减去鼠标与元素中的距离就行了，逻辑为旧有拖拽方式的第二种：盒子的位置 = 元素与页面间的距离 - 元素与盒子的距离。：返回元素与有定位的父类的上左边距，如果父类都没有定位，那么返回相对于页面的上左边距（本示例中页面内只有一个元素，故获取的值是元素相对于页面的距离）：鼠标距离触发事件的元素的上左边距（本示例中只有一个元素，故获取的值为鼠标相对于盒子元素的上左边距）// 元素的位置 = 鼠标与页面的距离 - 鼠标与元素的距离。
Vue+ElementUI技巧分享：结合Sortablejs实现表格行拖拽_vue element-ui 实现表格拖拽
最新发布
2401_84617431的博客
05-08 822
除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】return {},{ id: 1, createTime: ‘2023-01-01’, event: ‘事件1’ },{ id: 2, createTime: ‘2023-01-02’, event: ‘事件2’ },
js中的拖拽
betterangela的博客
11-11 3194
拖拽 dom javascript
一文带你了解原生js实现拖拽的具体细节
qq_52569656的博客
12-13 1984
本文通过图文的方式介绍了使用原生js实现元素拖拽的方式，包含了逻辑分析，边界处理等。
使用js实现拖拽功能（附具体实现代码）
笑到根本停不下来的Kathy思的博客
05-24 1万+
js拖拽功能的实现主要依靠3个事件，分别是onousedown鼠标按下、onmousemove鼠标移动和onmouseup鼠标抬起。并且它们具体是按照这样的一个顺序执行的。 `event.clientX`和`event.clientY`分别是鼠标当前的横坐标和纵坐标，`offsetX` 和 `offsetY` 分别表示元素的初始横坐标和纵坐标，移动的过程改变的是绝对定位下的`left`和`top`值。
react-sortablejs：一个基于成熟的拖放库Sortable构建的React组件
02-05
react-sortablejs React绑定到 请注意，由于仍然存在大量错误，因此尚未考虑将其投入生产。 产品特点 安装 sortablejs和@types/sortbalejs是对等依赖项。 后者仅在需要智能/打字稿时使用。 npm install --save ...
vue2.0使用Sortable.js实现的拖拽功能示例
10-20
在Vue 2.0中，实现拖拽功能可以借助第三方库Sortable.js，它是一个轻量级、高性能且无依赖的JavaScript拖放库。本示例将详细介绍如何在Vue项目中结合Sortable.js和vuedraggable.js来实现拖拽功能。 首先，你需要...
VueDraggableVuejs组件基于Sortablejs进行同步的拖放排序
08-08
在提供的压缩包文件"SortableJS-Vue.Draggable-17bdd4b"中，可能包含了VueDraggable的源码、文档、示例和其他相关资源。通过查看这些文件，你可以更深入地理解VueDraggable的内部实现和用法，同时也可以学习如何...
Js中六种拖拽(拉)事件（drag 和 drop）
QYgujingjing的专栏
11-02 3581
Js中六种拖拽(拉)事件（drag 和 drop）
js 实现拖拽效果
weixin_44244924的博客
03-31 610
js实现拖拽效果
js实现拖拽
编码世界
09-19 815
mousedown、mousemove、mouseup监听这三个事件。
js事件中的拖拽
szydqq的博客
07-15 879
js事件的拖拽
JS 拖拽事件
本郡主是喵
09-25 897
4. 将元素拖拽放置在容器中(在容器中松开鼠标),在在容器中绑定一个ondrop 事件中,同样需要调用 e.preventDefault() 方法来阻止默认行为。2.移动鼠标(monusemove),获取移动元素中鼠标的clientX、clientY 减去上边求出的鼠标到元素边界的距离 ,求出元素移动top、left值，赋给元素。下面有2个元素,判断2个元素是否碰撞,如果碰撞的情况非常多，我们可以考虑没碰撞的情况，下面满足任意一种情况就是没碰撞的。3.松开鼠标(monuseup),将鼠标移动事件清除清除。
js的拖拽
weixin_64037609的博客
09-18 262
js拖拽
js拖拽功能的实现
weixin_61738415的博客
04-19 436
/ 因为我们需要在按下的位置拖拽，因此我们还需要获取按下键鼠标相对div的左上角位置。// 当鼠标移动时，将当前鼠标相对视口的坐标赋值给元素的left和top。// 使用当前鼠标位置减去这个相对元素的左上角位置，保证鼠标所按位置拖拽。// 当释放鼠标键时，删除鼠标移动事件和删除鼠标释放事件。
js拖拽效果
SqlloveSyn的博客
08-05 710
拖拽过程中，鼠标移动过程中，获得最新的值赋值给div的left和top值，这样div就可以跟着鼠标走了。鼠标点击div并且不松开鼠标就可以实现拖拽的效果，松开鼠标后鼠标再移动，div不会再跟着移动。鼠标的坐标减去鼠标在div内的坐标就是div的真正位置。一下代码理解了思路后也可进行更改，大致步骤就是这样。...
el-tag 使用 sortablejs 拖拽
08-13
要使用sortable.js来实现el-tag的拖拽功能，你可以按照以下步骤进行操作： 1. 首先，确保已引入sortable.js库。可以通过在HTML中添加以下CDN链接或通过其他方式引入sortable.js： ```html <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.13.0/Sortable.min.js"></script> ``` 2. 在Vue组件中，使用ref属性给el-tag标签添加一个引用名，以便后续操作： ```vue <template> <div> <el-tag v-for="tag in tags" :key="tag" ref="tagItem">{{ tag }}</el-tag> </div> </template> ``` 3. 在mounted钩子函数中，使用sortable.js初始化拖拽功能，并指定el-tag作为可拖拽的元素： ```vue <script> import Sortable from 'sortablejs'; export default { data() { return { tags: ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4'], }; }, mounted() { const tagContainer = this.$refs.tagItem; new Sortable(tagContainer, { animation: 150, }); }, }; </script> ``` 在上面的代码中，我们在mounted钩子函数中创建了一个Sortable实例，并将el-tag的引用传递给它。我们还可以根据需要设置其他选项，比如动画效果。 现在，当你在页面上拖动el-tag元素时，它们应该可以被重新排序。记得根据自己的实际需求进行样式和行为的定制。希望这对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值