vue3 创建一个可拖拽组件

最新推荐文章于 2024-09-28 23:29:59 发布

Y_Hungry

最新推荐文章于 2024-09-28 23:29:59 发布

阅读量1.1k

点赞数

分类专栏： vue3 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_41012767/article/details/128100027

版权

本文档介绍了如何在Vue3项目中创建一个可拖拽的组件。通过阅读，你可以了解到在`draggable.ts`、`index.ts`以及`main.ts`中实现拖拽功能的关键代码步骤，并学习在应用中如何引入和使用这个组件。

摘要由CSDN通过智能技术生成

工程根目录新建文件夹和文件如下

1.draggable.ts 代码如下

/*
	需求：实现一个拖拽指令，可在父元素区域任意拖拽元素。

	思路：
		1、设置需要拖拽的元素为absolute，其父元素为relative。
		2、鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。
		3、鼠标移动(onmousemove)时计算每次移动的横向距离和纵向距离的变化值，并改变元素的 left 和 top 值
		4、鼠标松开(onmouseup)时完成一次拖拽

	使用：在 Dom 上加上 v-draggable 即可
	<div class="dialog-model" v-draggable></div>
*/

import type { Directive } from 'vue'
interface ElType extends HTMLElement {
parentNode: any;
}
const draggable: Directive = {
  mounted: function (el: ElType) {
    el.style.cursor = 'move'
    el.style.position = 'absolute'
    el.onmousedown &