vue3 创建一个可拖拽组件

最新推荐文章于 2024-04-15 16:31:37 发布

VIP文章 Y_Hungry

最新推荐文章于 2024-04-15 16:31:37 发布

阅读量1k

点赞数

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

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

版权

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

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 = function (e) {