Vue3：实现div拖拽

已于 2024-09-19 10:58:00 修改
阅读量393 收藏 1
点赞数
分类专栏： Vue高阶 文章标签： vue.js javascript 前端
于 2024-09-19 10:53:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yyyyyyyyyyy_9/article/details/142354252
版权
Vue高阶 专栏收录该内容
19 篇文章 13 订阅 ¥9.90 ¥99.00
订阅专栏

作者：CSDN @ _乐多_

本文记录了一个使用Vue3语法的可以对div进行拖拽，并将新的位置信息保存在本地，刷新浏览器之后位置还存在，的代码，代码即插即用。

文章目录

一、Vue3组件

<template>
    <div
      class="image-container"
      @mousedown="startDrag($event, 'alertDiv')"
      @mousemove
了解本专栏 订阅专栏 解锁全文
_乐多_
关注
专栏目录
订阅专栏
vue3自定义指令封装div拖拽功能（边界限制）
熟练掌握vue、react、Cesium等单词拼写！！！
05-05 2471
直接上代码（局部使用） <template> <div v-move class="box" style="text-align: right;"> {{ positionX }} {{ positionY }} </div> </template> <script setup lang='ts'> import { Directive, ref } from "vue"; let positionX = ref&lt
vue-draggable-div：vue可拖拽可伸缩的组件
02-13
Vue可拖动的div 说明 vue可拖拽可伸缩的组件，目前只是上方，详见以下传送门 安装 npm install vue-draggable-div 使用 [removed] import VueDraggableDiv from 'vue-draggable-div' ... components: {VueDraggableDiv} 需要使用样式样式时，导入“ vue-draggable-div / dist / vue-draggable-div.css” 任选属性及触发事件 道具： 可拖动的 descibe：是否可拖拽 类型：布尔型 要求：假 默认值：true < vue xss=removed> 可调整大小 descibe：是否可缩放 类型：布尔型 要求：假 默认值：true < vue-draggable-di
[vue3]实现div拖拽定位
qq_38823743的博客
01-11 2062
拖拽我
vue3使用自定义指令实现拖拽
weixin_44746719的博客
09-06 1037
【代码】vue3使用自定义指令实现拖拽。
vuejs移动端实现div拖拽移动
12-12
vue移动端实现div拖拽移动，供大家参考，具体内容如下 本文讲述，在使用VUE的移动端实现类似于iPhone的悬浮窗的效果。 相关知识点 touchstart 当在屏幕上按下手指时触发 touchmove 当在屏幕上移动手指时触发 touchend 当在屏幕上抬起手指时触发 mousedown mousemove mouseup对应的是PC端的事件 touchcancel 当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作。 效果图 实现步骤 （一）htm
Vue3中如何将一个div进行拖拽
nyasm的博客
03-09 1377
* 设置鼠标样式为可抓取状态 */
vue3实现元素拖拽移动功能
ZHENGCHUNJUN的博客
01-18 5961
整体思路是在鼠标按下时计算初始偏移值，并在拖拽过程中更新 div 元素的位置，通过事件监听器实现拖拽效果。
Vue3中div自由拖拽宽度和高度。
程序研博客
06-15 5735
Vue3中我们会遇到自由拖拽宽度和高度的页面需求，查看很多方法都无法满足当前需求。下面是我们Vue3版本的代码，直接复制粘贴就可以实现效果。根据自己需求更改即可投入使用，非常方便快捷。（本人文章全都是免费开源，拒绝收费。构建果然免费共享技术环境）下面希望各位大哥支持一下我开发的小程序，点击一下增加一下我的用户量。如有建议可以私信我非常感激。
vue实现div拖拽互换位置
10-17
在Vue框架中实现div元素的拖拽互换位置是一项常见的功能需求，它主要通过监听和控制DOM元素的拖放事件来完成。本文将详细探讨如何使用Vue技术实现该功能，并提供相应的代码示例供读者参考。 首先，要实现拖拽功能，...
vue实现div可拖动位置也可改变盒子大小的原理
10-14
在Vue中实现一个div元素既可以拖动改变位置，又可以调整大小的功能，涉及到的核心技术包括事件监听、CSS定位以及DOM操作。下面将详细介绍实现这一功能的步骤和原理。 首先，我们需要监听鼠标事件来处理拖动和改变...
vue自定义指令-实现div和图片的拖拽，放大，缩小
06-20
vue自定义指令--实现div和图片的拖拽，放大，缩小，已封装成组件，下来导入后可直接使用
【vue3】封装div可拖拽函数&边界限制
m0_67986791的博客
03-20 967
在utils里面创建drag.ts文件。在要使用的.vue直接 v-drag。在main.ts里面全局引入。
vue3+ts div头部标题栏可移动拖拽，且不能超过当前屏幕范围
Lilyxu1111的博客
05-17 533
div的样式如下，值得注意的是,设置right还是left ,top还是bottm，必须得和handleRemove方法中的保持一致，因为方法中是设置的right和bottom【dom.style.right = dropX + ‘px’；dom.style.bottom = dropY + ‘px’】,则样式中也得设置right和bottom。移动的方法如下，其中dom为需要设置的div，封装此方法可以页面多元素使用。
vue3实现div可拖拽改变高度
前端程序猿的博客
07-05 3219
直接上代码
vue3全局自定义指令实现div在指定区域拖拽
qq_47657875的博客
07-27 726
【代码】vue3全局自定义指令实现div在指定区域拖拽。
vue实现拖动div
aitanxiaofeng的博客
07-18 8401
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="./js/vue.min.js"></scri...
Vue 3 中的拖拽排序功能实现
最新发布
jieyucx的博客
07-24 1111
在Vue组件的部分，我们首先需要定义一组问题和一个用于记录当前被拖拽元素索引的响应式引用。{ id: 1, text: '问题 1' },{ id: 2, text: '问题 2' },{ id: 3, text: '问题 3' },{ id: 4, text: '问题 4' }]);// 被拖拽元素的索引通过以上步骤，我们成功在Vue 3中实现了一个简单的拖拽排序功能。Vue的响应式系统和组件化特性使得这样的功能实现起来既直观又高效。
Vue3 实现元素拖拽，缩放功能
xhwy_zh的博客
10-12 808
【代码】Vue3 实现元素拖拽，缩放功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值