Demo:2023-12-27
2023-12-27 16:38:47
在vue3中使用sortablejs实现拖拉拽功能
<template>
<div class="about">
<div class="left">
<ul id="left-list" ref="leftList">
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
</div>
<div class="right">
<ul id="right-list" ref="rightList">
<li>666</li>
</ul>
</div>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import Sortable from "sortablejs";
onMounted(() => {
const leftList = document.getElementById("left-list");
const rightList = document.getElementById("right-list");
console.log(leftList, rightList);
Sortable.create(leftList, {
group: "shared", // 设置分组名,用于跨列表拖拽
animation: 150, // 拖拽过程中的动画时间(单位:毫秒)
onEnd: function (evt) {
// 当从左侧列表拖拽项添加到右侧列表时触发的回调函数
const item = evt.item; // 获取拖拽的元素
rightList.appendChild(item); // 将元素添加至右侧列表
},
});
Sortable.create(rightList, {
group: "shared", // 设置分组名,与左侧列表的分组名保持一致
animation: 150, // 拖拽过程中的动画时间(单位:毫秒)
onEnd: function (evt) {
// 当从右侧列表拖拽项添加到左侧列表时触发的回调函数
const item = evt.item; // 获取拖拽的元素
leftList.appendChild(item); // 将元素添加至右侧列表
},
});
});
</script>
<style lang="scss" scoped>
* {
padding: 0;
margin: 0;
list-style: none;
}
.about {
display: flex;
justify-content: space-around;
.left {
padding: 10px;
background-color: skyblue;
}
.right {
padding: 10px;
background-color: pink;
}
}
</style>
文章来源:https://blog.csdn.net/qq_52696618/article/details/135248158
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!