Sortable插件实现最简单的拖拽效果

news/2024/11/26 7:28:41/

 1.安装并引入Sortable插件

 2.直接获取需要拖动的dom节点

javascript"><template><div><ul id="list"><li v-for="item in list1" :key="item.id" :data-id="item.id" v-on:drag="saveDragItem">{{ item.name }}</li></ul></div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import Sortable from "sortablejs";
const list1 = ref([{ id: 1, name: '项目1' },{ id: 2, name: '项目2' },{ id: 3, name: '项目3' }
])
onMounted(() => {new Sortable(document.getElementById('list'), {group: 'shared',animation: 150,});
})


http://www.ppmy.cn/news/1550008.html

相关文章

【Rust练习】23.生命周期

练习题来自https://practice-zh.course.rs/lifetime/basic.html 1 /* 为 i 和 borrow2 标注合适的生命周期范围 */// i 拥有最长的生命周期&#xff0c;因为它的作用域完整的包含了 borrow1 和 borrow2 。 // 而 borrow1 和 borrow2 的生命周期并无关联&#xff0c;因为它们的…

选择使用whisper.cpp进行语音转文字

需要将一些wav格式的语音文件转成文字&#xff08;ASR&#xff0c;STT&#xff09;&#xff0c;接到这个任务后&#xff0c;首先上网搜索有没有现成免费的工具或服务可以使用。常用的关键字如“语音转文字 免费 在线”。 搜到的很多野鸡网站&#xff0c;都可以免注册免费提供短…

代码随想录算法训练营第五十七天|Day57 图论

prim算法精讲 https://www.programmercarl.com/kamacoder/0053.%E5%AF%BB%E5%AE%9D-prim.html prim算法核心就是三步&#xff0c;熟悉这三步&#xff0c;代码相对会好些很多&#xff1a; 第一步&#xff0c;选距离生成树最近节点第二步&#xff0c;最近节点加入生成树第三步&a…

【AI技术赋能有限元分析应用实践】pycharm终端与界面设置导入Abaqus2024自带python开发环境

目录 一、具体说明1. **如何在 Windows 环境中执行 Abaqus Python 脚本**2. **如何在 PyCharm 中配置并激活 Abaqus Python 环境**3. **创建 Windows 批处理脚本自动执行 Abaqus Python 脚本**总结二、方法1:通过下面输出获取安装路径导入pycharm方法2:终端脚本执行批处理脚本…

LeetCode Hot100 - 矩阵篇

前言 刷力扣hot100&#xff0c;记录一下每题的思路~ 这次是矩阵相关的题目 &#xff08;1&#xff09;73. 矩阵置零 ①两个boolean数组记录要置零的行列号&#xff0c;遍历数组置零对应的行列 class Solution {public void setZeroes(int[][] matrix) {int mmatrix.length, …

《地质学报》

《地质学报》是中国地质学会主办的地质科学学术刊物。《地质学报》反映地质科学各分支学科及边缘学科中最新、最高水平的基础理论研究和基本地质问题研究成果。《地质学报》登载论文范围主要包括&#xff1a;古生物与地层、构造地质、地球物理、矿物、岩石、地球化学、矿床、石…

文件上传代码分析

目录 不同类型的语言脚本语⾔/解释型语⾔⼀次编译到处运⾏编译型语⾔ 不同语⾔的webshell上传差异脚本语⾔/解释型语⾔⼀次编译到处运⾏编译型语⾔ ⽂件上传到webshell任意⽂件上传js检测解析规则MIME⽂件头后缀检测失效 NTFS Tricks 不同类型的语言 脚本语⾔/解释型语⾔ 代表…

通信原理实验:HDB3编译码(256KHz归零码实验)

目录 一、实验目的 二、实验器材 三、实验原理 HDB3 编译码实验原理框图:​编辑 实验框图说明: 编码规则: 四、实验步骤 五、实验记录与处理 六、实验结果及分析 一、实验目的 了解几种常用的数字基带信号的特征和作用。掌握 HDB3 码的编译规则。了解滤波法位同步在…