vue解决dragstart事件不灵活问题

最新推荐文章于 2025-04-02 22:06:05 发布

原创最新推荐文章于 2025-04-02 22:06:05 发布

· 972 阅读

1 ·

版权

文章标签：

#javascript #开发语言 #ecmascript

在Vue项目中实现鼠标拖拽并改变划过位置颜色时，遇到@dragstart事件触发不灵敏的问题。通过添加draggable属性可以改善，但会导致拖动时鼠标显示元素缩略图。通过在dragstart事件中使用event.dataTransfer.setDragImage()方法，可以定制拖动时的视觉反馈，从而获得更好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用这个vue记录鼠标拖拽划过位置并将划过位置变色
做了个小案例但发现 vue中 @dragstart事件的触发好像不太灵活经常触发不到
其实给放了事件的元素加上draggable="true"就能解决不灵活的问题
在这里插入图片描述
但是这会带来零一个问题
我们每次拖拽鼠标上好像一直带着一块元素一样

这个问题我们需要在dragstart绑定的事件中加上

event.dataTransfer.setDragImage(new Image(), 0, 0);

在这里插入图片描述
这样我们的东西就非常的灵魂好用啦

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

瑞晟技术服务中心-耿瑞

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

H5中的draggable

m0_51431448的博客

08-06

746

draggable 属性规定元素是否可拖动。必须设置，否则没有拖拽效果及事件触发链接和图像默认是可拖动的。draggable 属性经常用于拖放操作。

基于vue项目实现简单的拖拽功能

QYThh的博客

12-24

2371

知识点： draggable：允许元素进行拖拽 @drop：当元素放下到drop元素触发 @dragstart：开始拖元素触发 prevent：拦截默认事件 dataTransfer： dataTransfer 对象允许我们在开始拖动元素时设置数据，并在将元素放在拖放区中时访问相同的数据。我们应该知道一些关于 dataTransfer 的属性和方法（如果要了解更多，请查看dataTransfer API 文档）。 dropEffect：当前的拖放操作（例如，移动，复制） effectAllowed：指定拖

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

vue拖拽不触发解决方式 @dragstart @drop

斯幽柏雷科技

01-01

6435

解决VUE拖拽事件不触发的各种问题.

vue中的拖拽

最新发布

weixin_42479421的博客

04-02

1245

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

vue用dragstart实现拖拽

浮游的博客

03-12

1万+

下面是HTML5的拖拽事件 dragstart：开始拖元素触发，作用于拖拽元素 dragenter：元素拖进可drop元素（绑定drop事件的元素）时触发，作用于目标元素 dragover：当元素拖动到drop元素上时触发，作用于目标元素 drop：当元素放下到drop元素触发，作用于目标元素 dragleave ：当元素离开drop元素时触发，作用于目标元素 drag：每次元素被拖动时会触发，作用于目标元素 dragend：放开拖动元素时触发，作用于目标元素完成一次拖放的事件过程是： dragstart

vue + iview 使用原生拖拽事件无效问题解决办法

曹先森的博客

06-23

1975

在vue中使用拖拽事件，可以直接绑定使用，例如： ..... <div draggable="true" @drag='drags($event, "42225")' @dragstart='dragstart($event)' > 拖拽 </div> ..... 但在使用 iview 的组件的时候这么写是没有效果的，例如： <Row> <Col span='24'> <Button draggable="true" @dr

@dragstart 与 @mousedown拖拽事件

weixin_43964414的博客

04-05

3126

想要实现拖拽效果，可以用@dragstart和 @mousedown两个方法，但是真要使用时，用哪一个呢？具体请看以下两者的区别。 @dragstart使用场景：有明确的拖拽区域与界限拖拽灵活度要求不高拖拽时有明确的数据传递需求 drag推拽事件配置：发生在拖动元素上的事件 @dragstart：拖拽开始事件，可绑定于被拖拽元素上； @dragend：拖拽结束事件，可绑定于被拖拽元素上； @drag：拖拽过程中一直触发；事件名触发时机触发次数 dragstart

vue 拖拽功能vue 拖拽功能vue 拖拽功能

03-21

Vue.js 是一款流行的前端JavaScript框架，它以其轻量级、易上手和强大...Vue.js的灵活性和可扩展性使得在实现拖拽功能时，可以轻松地结合其他前端技术，如CSS3动画、状态管理工具Vuex等，来创建出更加丰富的交互体验。

sl-vue-tree-Vue.js的一个简单的可定制的可拖动树组件-Vue.js开发

05-27

在IT行业中，Vue.js是一个非常流行的前端JavaScript框架，它以其易用性、灵活性和高性能而闻名。本项目“sl-vue-tree”是一个基于Vue.js的可定制化且支持拖动功能的树形组件，适用于各种数据展示和操作场景。下面...

drag-demo:基于vue3.0 + ts的可视化组件拖拽demo

03-10

Vue的响应式系统可以与这些事件配合，实时更新组件的状态，以实现组件在页面上的动态布局。项目结构可能包括以下部分： - `src`目录：存放源代码，包括组件、样式和配置文件。 - `components`子目录：包含拖放组件...

基于vue的甘特图，可上下拖拽

05-14

总的来说，这个项目提供了一个可自定义、交互性强的甘特图解决方案，尤其适用于需要灵活调整任务时间的场景，如企业排班系统。通过深入研究其源码，开发者可以学习到Vue组件开发、事件处理、数据绑定以及拖放交互的...

vue拖拽@drop不生效解决方式

haosicx的博客

04-16

5475

想要一个原生可以进行拖拽可以使用HTML5的一个属性draggable='true' <div class="widget" draggable='true'>pie</div> 加上了后这个元素就开启了拖拽然后在需要放置的元素上注册一个@drop='函数'来接收拖拽的元素但是你会发现元素拖拽上去了也没有生效这是因为还需要阻止一个默认事件 @dragover="e=>e.preventDefault()" 加上后就可以了 <div class="

vue拖拽缩放组件（vue-drag-resize）

热门推荐

qq_17627195的博客

10-12

1万+

vue-drag-resize是一个支持拖拽与缩放的vue插件，支持vue 1.x与2.x，使用方便，上手便利。特征 1. 轻量级，无依赖性 2. 所有的操作都是可联动的 3. 支持触摸事件 4. 定义元素可拖拽，或者可缩放，或者二者兼有 5. 提供用于调整大小的操作点与操作框 6. 可以按照比例缩放或者不按照比例缩放元素 7. 可限制拖拽的最大与最小值、拖拽的范围是否超出其父元素 8. 可限制拖动的方向为垂直或水平轴 gitHib地址： ht

H5拖动如何在vue脚手架中实现

qq_45740103的博客

03-24

297

实现的效果是将右侧容器里的小方块移动到左侧的容器中也可以移回到右侧容器中在方块进去容器时容器背景颜色会变化拖动元素移出或者已经放入容器中背景变回透明需要用到的事件以及方法 draggable 可拖动对需要拖动的对象设置为true ondrag 元素拖动时触发 ondragover 当某被拖动的对象在另一对象容器范围内拖动时触发此事件只拖动的元素在里面移动会一直触发 o...

使用vue-draggable在拖拽元素上绑定的点击事件在安卓手机上失效

斑斓小星愿的博客

07-10

5069

使用vuedraggable后在移动端Android手机点击事件失效效果图如下：问题描述：在Android机型的手机中点击删除按钮无效。代码如下尝试了网上查资料说的click.stop.prevent方法，使用后问题依然存在。在官网的issues中找到了解决办法。把需要拖拽的元素添加到handle属性中，删除按钮不包含进去就可以解决这个问题了。 ...

vue 组件拖拽

qq_38744614的博客

08-29

6984

vue 组件拖动，自定义属性

【Vue3】鼠标快速拖拽时，mouseleave\mouseMove事件失效，菜单等拖拽改变大小不灵活

yuanyuan1995的博客

10-12

2104

找了资料发现，当鼠标离开绑定了mouse系列事件的组件之后，会终止拖拽事件。所以需要将mousemove绑定在一个足够大的父容器上才能继续生效，哪里还有比window更大的呢。拖拽改变左侧侧边栏的宽度，按照下面的写法，必须得缓慢的一点点拖拽才能改变大小，很难用而且左右拖拽不灵活。中间我还尝试了用document.mousemove，效果没啥差别，不好用。

在Vue.js中使用 H5的拖拽

荒唌Blog

08-24

382

1、一些帮助 1、来自w3school的 HTML5 拖放教程; 2、我觉得这篇文章写的很不错，可以参考一起食用：How to Add Drag and Drop to Your VueJS Project； 2、这是我的Vue简单的示例代码： JS模块： data(){return{ //存放的盒子 boxList:[ {},{},{},{},{},{},{}, ], //数据列表 dataList:[ {id:0,name:"t

vuedraggable遇到的问题

xinxin_csdn的博客

10-15

2157

原因2、draggable组件必须直接包含v-for: draggable包在ul外层就出现了这个问题。原因：外层的父组件使用了vue-draggable-resizable组件封装的可拖拽的弹框组件。二、拖拽后位置未发生变化：@start、@end事件都执行。原因1、draggble绑定的v-mode和下方列表不一致。一、拖拽无效：触发@start事件，但不执行@end方法。