【web】vue实现拖拽DOM元素效果

原创 已于 2022-07-12 13:46:14 修改 · 955 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

于 2022-06-11 11:40:55 首次发布

这周接了个小外包，要求用vue实现如下图的拖拽效果

在这里插入图片描述

原理

@mousedown监听鼠标按下，按下后开启mousemove + mouseup监听器，并根据clientY + offsetTop计算出元素新的top高度进行赋值，实现元素跟随。具体源码如下

<div title="demo" class="icon" @mousedown="demo">
	<img src="../assets/logo.png" alt="
最低0.47元/天 解锁文章
draggable实现拖拽、禁止拖拽、拖拽后元素重新排序到指定位置
日常笔记/总结/系列知识梳理
10-20 3612
draggable的github地址// 安装 npm install vuedraggable // 引入 import draggable from 'vuedraggable'
Vue实现DOM元素拖放互换位置
觉醒法师的专栏
01-18 5941
HTML 拖放接口使得 web 应用能够在网页中拖放文件。这里将介绍了 web 应用如何接受从底层平台的文件管理器拖动DOM的操作。拖放的主要步骤是为 drop 事件定义一个释放区(释放文件的目标元素) 和为dragover事件定义一个事件处理程序。触发 drop 事件的目标元素需要一个ondrop 事件处理函数。下面这一段代码以一个 元素为例展示了这些工作是如何完成的。一般来说，在实际应用中需要定义一个 dragover 事件的处理函数并在其中加入关闭浏览器默认拖放行为的代码。
VUE：实现网页中元素的拖动
干饭搬砖两不误。
09-03 2394
实现页面中的元素拖动。
dom 拖拽样式_一个全新的Vue拖拽特性实现：“移动”部分
weixin_39741459的博客
11-29 457
关于拖拽CabloyJS提供了完备的拖拽特性，可以实现移动和调整尺寸两大类功能，这里对移动的开发进行阐述 关于调整尺寸的开发，请参见：拖拽：调整尺寸演示开发步骤下面以模块test-party为例，说明拖拽（移动）的开发步骤完整源码请参见文件src/module/test-party/front/src/kitchen-sink/pages/dragdrop/dragdropMove.vue，这里只...
vue----实现列表拖拽排序的功能
最爱松露巧克力
04-06 2022
<template> <div class="test_wrapper" @dragover="dragover($event)"> <transition-group class="transition-wrapper" name="sort"> <div v-for="(item) in dataList" :key='item.id' class="sort-item" :draggable="true" ...
Vue实现简单的拖拽效果
11-19
这个效果是通过自定义Vue指令（Directives）来完成的，这是一种扩展Vue功能的方式，使得我们可以对DOM元素添加特定的行为。 首先，我们看到一个自定义指令`v-drag`被定义，它有三个修饰符：`l`（left，代表水平拖动...
vue全局自定义指令-元素拖拽的实现代码
10-17
实现拖拽时，需要掌握相关的DOM属性和事件，以及Vue指令的生命周期函数，这些都是实现交互式Web应用不可或缺的技能。希望本文的代码示例和解释可以帮助开发者更好地理解和应用Vue的自定义指令。
基于Vue实现可以拖拽的树形表格实例详解
10-17
在现代的Web开发中，Vue.js作为一个轻量级的前端框架，因其灵活性和易用性，被广泛应用于构建用户界面。当开发一个树形表格时，Vue.js的响应式数据绑定和组件化思想显得尤其有用。在特定的业务场景中，树形表格不仅...
在vue实现dom的拖拽
weixin_43452622的博客
08-04 801
vue 实现dom的拖拽交换位置以及dom内包含的数据
Vue 实现拖拽模块(三)自定义拖拽组件的样式
记得抬头微笑
12-09 4572
本文主要介绍了 Vue 自定义拖拽组件的样式，元件支持通过右侧的属性样式配置元件的样式
javascript实现dom元素可拖动
10-22
HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
vue移动端实现，DOM元素拖拽放大缩小，改变位置
qq_46634851的博客
08-19 2802
vue 移动端实现移动，并放大缩小功能
vue通过 Ctrl 点击鼠标实现 div 多选操作
weixin_38912662的博客
11-16 3170
针对前端部分，有一个div的列表，想通过按住Ctrl键后点击div实现多选的功能 大体思路如下： 1 通过拦截控制ctrl的键盘code值， 2 在div上添加一个点击事件，将div设置成一个选中的样式，当然，在点击事件里面得判断一下，判断键盘是不是被按下了，没有按下的话，不做任何处理 具体代码如下： 1 首先先定义变量 data() { return { data:[], //数据源列表 isCtrl: false, // 快捷键 ctrl 是否被按下
VUE自定义指令实现鼠标拖拽
GoodAll_K的博客
12-27 2117
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;练习：自定义指令 实现元素的拖拽&lt;/title&gt; &lt;script src="js/vue.js"&gt;&
vue 拖拽功能
JSN___的博客
03-31 296
vue 拖拽功能 html <div id="app" @mousedown="move"> {{positionX}} {{positionY}} </div> data数据声明 在这里插入代码片 data () { return { positionX: 0, positionY: 0, } }, js部...
Dom（二十一） 拖拽
Oliver尹的博客
09-02 1882
主要的应用场景：拖拽排序，拖拽上传文件，头像拖拽裁剪 拖拽的流程： 确定可拖拽的内容 -&gt; 开始拖拽 -&gt; 拖拽过程（可放置内容/不可放置内容） -&gt; 结束拖拽 涉及的知识点： 确定可拖拽的内容：draggable属性标识哪些内容是可拖拽的 开始拖拽：触发一个dragstart事件，标识开始拖拽了 拖拽过程：在拖着的过程中不断的触发，drag，dragenter，dr...
js和css禁止dom被拖拽和选中
Combarlala的博客
09-11 1338
添加如下代码 ondragstart="return false" onselectstart="return false;" style="-moz-user-select: none; -khtml-user-select: none; user-select: none"
vue之自定义指令解析和实现拖拽和上下左右滑长按指令
牛先森家的博客
02-28 3149
vue的自定义指令font-size的设置PC端拖拽移动端拖拽 注意点：bind 和 inserted 共同点： dom插入都会调用，bind在inserted之前 不同点： bind 时父节点为 null inserted 时父节点存在。 bind是在dom树绘制前调用，inserted在dom树绘制后调用 bind: function (el) { console.log('bind',el.parentNode) // null }, inserted: func
Vue 拖拽功能 之 自定义指令实现元素拖拽功能
前端看世界
07-27 6456
拖拽功能主要操作的是真实的DOM元素以及鼠标事件，在vue中使用自定义指令最合适不过了。 当然使用组件封装起来，然后拖拽这个组件，也是可以实现相同的效果，不过我觉得这样有点大材小用，也缺乏灵活性，好处是可以传入更多的控制属性。总之，在组件与指令之间找到平衡点，自有取舍。...
基于Vue.js的拖拽元素插件实现详解
实现基于Vue.js的拖拽元素插件是一项结合了现代前端框架特性与原生DOM操作能力的综合性开发任务，其核心目标是创建一个可复用、易于集成、功能稳定且具有良好用户体验的拖拽功能组件或指令。该插件不仅需要兼容Vue....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值