Vue中实现拖拽效果

汪汪队出击

已于 2022-10-14 17:26:48 修改

阅读量1.2k

点赞数 2

分类专栏： vue js 文章标签： html 前端

于 2022-10-14 17:24:58 首次发布

本文链接：https://blog.youkuaiyun.com/qq_58671311/article/details/127324566

版权

Vue2项目中遇到需求要求页面左侧部分实现拖拽效果

实现效果：

1665739151500

实现代码：

一、使用盒子包裹需要拖拽的区域，并绑定ref

二、使用$ref获取DOM信息具体代码（这个方法在mounted里调用即可）

// 左右拖拽左侧结构
    resizeFn() {
      let element = this.$refs.leftBox;
      let resize = element.querySelector(".resize");
      resize.style["right"] = "0";
      resize.addEventListener("mousedown", function (e) {
        let startX

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

汪汪队出击

关注关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
7
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

如何在Vue中实现拖拽功能？

卡拉米

07-09

608

Vue.js是一款流行的JavaScript框架，用于构建用户界面。其中一个常见的需求是在Vue中实现拖拽功能，让用户可以通过拖拽元素来进行交互。今天，我们就来学习如何在Vue中实现这一功能。首先，我们需要明白拖拽功能的基本原理：监听鼠标事件、实时更新拖拽元素的位置，最后在合适的时机停止拖拽并更新元素位置。在Vue中，我们可以通过绑定相关事件来实现这一功能。

Vue实现开关按钮拖拽效果

10-14

在Vue.js中，实现开关按钮拖拽效果是一个有趣且实用的功能，这通常涉及到自定义指令（Directives）的使用。自定义指令允许我们扩展Vue的内置行为，使其能够处理更复杂的交互逻辑。以下是对给定代码的详细解释： 1. ...

7 条评论您还未登录，请先登录后发表或查看评论

vue实现拖拽效果

11-27

vue中实现拖拽效果，供大家参考，具体内容如下首先要搞明白分清clientY pageY screenY layerY offsetY的区别作用3（事件对象中记录的鼠标位置）语法解释 evt.screenX 相对于屏幕的左上角为原点 evt.screenY evt.clientX 相对于浏览器的客户端左上角为原点（不计算滚动条位置） evt.clientY evt.pageX 相对于浏览器的客户端左上角为原点（计算滚动条的位置） evt.pageY evt.offsetX 以自己的左上角为原点 evt.offsetY evt.pageY/evt.pageX 相当于文档的左上角

vue 实现拖拽效果

欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！

07-28

1038

使用自定义指令可以实现多个面板拖拽互不影响

vue中的拖拽

最新发布

weixin_42479421的博客

04-02

1197

实现方式特点适用场景HTML5 原生拖拽 API✅ 直接使用进行数据传输✅ 兼容性好（大部分浏览器支持）✅ 适合简单的拖拽场景低代码平台、表单生成器、组件拖拽Vue/React 组件库（如✅ 提供更丰富的交互效果✅ 支持列表排序、拖拽嵌套❌ 依赖额外的库复杂拖拽，如列表排序、树状结构CSS 仅视觉拖拽（无交互）✅ 仅改变视觉位置，无数据交互❌ 无法存储拖拽数据简单 UI 动画。

基于Vue实现拖拽效果

11-30

效果图 demo1.gif 分清clientY pageY screenY layerY offsetY的区别在我们想要做出拖拽这个效果的时候，我们需要分清这几个属性的区别，这几个属性都是计算鼠标点击的偏移值，我们需要对其进行了解才可以继续实现我们的拖拽效果 clientY 指的是距离可视页面左上角的距离 pageY 指的是距离可视页面左上角的距离(不受页面滚动影响) screenY 指的是距离屏幕左上角的距离 layerY 指的是找到它或它父级元素中最近具有定位的左上角距离 offsetY 指的是距离它自己左上角的距离一张图带大家简单了解了解区别在我们简单了解完这些个属性

html5拖动监听

weixin_30537391的博客

08-07

1022

在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发释放目标时触发的事件: ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragover - 当某被...

vue模块拖拽效果

b002843508509502的博客

03-08

375

正巧在之前面试中遇到问实现拖拽效果当时面试的时候简单回答了实现的方式与逻辑。现在闲来无事，把这个东西实现了一下。原理很简单，写的很方便。数据驱动，建立一个数组，数组初始长度为1 拖动触发时，添加一个对象到数组中，拖动的是下标为0的对象，新建的还在原来位置放着，等待下次拖动。话不多说，上代码 <template> <div cl...

vue 弹框实现移动效果

04-25

vue 弹框实现移动效果是指在 vue 项目中实现弹框的移动效果，使其可以被拖动和悬浮。下面将对实现这种效果的知识点进行详细的解释。 1. 自定义指令在 vue 中，可以使用自定义指令来实现弹框的移动效果。自定义...

Vue实现拖拽效果

weixin_39505091的博客

02-26

2783

1.拖拽生成代码项目中需要实现拖拽自动生成代码的功能，也就类似于一般网站中那种代码生成功能。这一块后端比较好实现，只需要从数据库获取控件绑定的代码块即可，前端则需要实现代码块拖拽的效果。界面大致如下所示：项目中前端使用的是Vue，所以这里记录一下Vue实现拖拽效果的方法。 2.可拖拽实现（小方块）要拖拽控件，首先即需要设定控件可拖拽。设置draggable="true"允许其被拖动。这里貌...

Vue实现简单的拖拽效果

11-19

本文实例为大家分享了Vue实现简单拖拽效果的具体代码，供大家参考，具体内容如下自定义指令v-drag l 存在时只能横向拖拽 t 存在时只能纵向拖拽 lt都存在时可以任意方向拖拽 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>拖拽</t

基于Vue实现拖拽功能

08-27

主要为大家详细介绍了Vue实现拖拽功能，拖动方块进行移动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

vue实现拖拽（vuedraggable）

qq_45750213的博客

02-22

6177

pushComponent方法通用的（传参不同），上面写的有。左侧往右侧拖动，右侧列表可以进行拖拽排序。//点击子节点（叶子节点）

vue：实现简单的拖拽功能

分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等

05-29

3744

简单的拖拽功能

手把手教你学会用vue实现元素拖拽移动+滚轮缩放功能

热门推荐

vvv3171071的博客

01-26

2万+

项目中做看板重构时遇到的开发需求，不能使用组件，乍一看感觉很头大，但实际上手做出来后还是小有成就的。直接进入正题：先创建一个简单的vue demo项目 <template> <div class="drag"> <div class="back_box"> 这是一个背景 <div class="drag_box">这是一个蓝色可拖拽元素</div> </div> </div&g

Vue项目中实现拖拽排序效果

09-13

在Vue项目中实现拖拽排序效果，可以借助一些第三方库来帮助实现，比如`vue-draggable`或`vuedraggable`，这是一个基于Sortable.js的Vue组件，用于创建可拖拽的列表和网格。实现步骤大致如下： 1. 首先，需要安装`vuedraggable`组件。可以通过npm或yarn来安装： ``` npm install vuedraggable --save ``` 或者 ``` yarn add vuedraggable ``` 2. 在Vue项目中引入`vuedraggable`组件，并在需要实现拖拽排序的组件中使用它。 3. `vuedraggable`组件允许我们传递各种props来控制其行为，比如`list`属性用于绑定需要排序的数据数组，`@start`、`@update`和`@end`事件可以用来获取拖拽的起始、进行中和结束时的状态。 4. 在`vuedraggable`组件内部，你可以使用`<slot>`或`<template>`来定义每个可拖拽的元素，通常会绑定一些数据或方法到每个元素上，以便在拖拽时更新它们的位置。下面是一个简单的使用`vuedraggable`组件的示例代码： ```vue <template> <div> <vuedraggable v-model="items" @end="onEnd"> <div v-for="item in items" :key="item.id"> {{ item.content }} </div> </vuedraggable> </div> </template> <script> import draggable from 'vuedraggable'; export default { components: { draggable }, data() { return { items: [ { id: 1, content: '内容1' }, { id: 2, content: '内容2' }, { id: 3, content: '内容3' } ] }; }, methods: { onEnd() { console.log('排序完成:', this.items); } } }; </script> ``` 在这个示例中，我们创建了一个可拖拽的列表，列表中的每个项都可以通过拖拽来重新排序。`v-model`绑定了`items`数组，这样拖拽过程中列表项的顺序会实时反映到`items`上。当拖拽结束时，`onEnd`方法会被触发，你可以在这里实现排序完成后的逻辑处理。