首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在子元素上错误地调用了VUE 3的dragenter和dragleave

在Vue 3中,调用dragenter和dragleave事件是错误的。这是因为Vue 3中已经将这两个事件移除,并引入了新的事件API。

在Vue 3中,应该使用dragover和drop事件来处理拖拽操作。dragenter和dragleave事件被废弃的原因是它们在处理拖拽操作时会产生性能问题,而dragover和drop事件能够更好地处理这些问题。

具体来说,dragover事件在拖拽元素经过目标元素时触发,而drop事件在拖拽元素在目标元素上释放时触发。通过监听这两个事件,可以实现拖拽操作的相关逻辑。

在Vue 3中,可以通过以下方式使用dragover和drop事件:

  1. 在模板中添加对应的事件监听器:
代码语言:txt
复制
<template>
  <div @dragover="handleDragOver" @drop="handleDrop"></div>
</template>
  1. 在组件中定义对应的方法来处理事件:
代码语言:txt
复制
<script>
export default {
  methods: {
    handleDragOver(event) {
      // 处理拖拽元素经过目标元素时的逻辑
    },
    handleDrop(event) {
      // 处理拖拽元素在目标元素上释放时的逻辑
    }
  }
}
</script>

关于Vue 3的事件处理,可以参考官方文档:Vue 3 Events

另外,如果需要在Vue 3中实现拖拽操作,可以考虑使用第三方库,如vue-draggable,该库提供了丰富的拖拽功能,并且与Vue 3兼容。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

vue-grid-layout数据可视化图表面板优化过程所遇问题汇总

还有有些实现还使用了Bus 透传 drag/dragend 事件,其实这里可能没有理解 :针对对象事件名称说明被拖动元素dragstart元素开始被拖动时候触发drag元素被拖动时反复触发dragend...拖动操作完成时触发目的对象dragenter当被拖动元素进入目的元素所占据屏幕空间时触发dragover当被拖动元素目的元素内时触发dragleave当被拖动元素没有放下就离开目的元素时触发整个拖拽事件触发顺序如下...dragenterdragover事件默认行为是拒绝接受任何被拖放元素。因此,我们必须阻止浏览器这种默认行为。...e.preventDefault();如果drop接收盒子要想接收到元素,那么接收拖动元素 dragenterdragover必须阻止默认行为。...代码优化工程,当然还得对代码进行拆解,整个仪表盘差不多5000多行代码,vue3可以拆解成多个钩子,方便代码复用与维护先写到这吧,后面有时间再理顺一下

1.6K30

drag事件详解:html5鼠标拖动排序及resize实现方案分析及实践

ondragover - 当被拖动元素目的元素内时触发——放到何处ondragleave - 当被拖动元素没有放下就离开目的元素时触发ondrop - 一个拖动过程中,释放鼠标键时触发此事件——...进行放置针对对象事件名称说明被拖动元素dragstart元素开始被拖动时候触发drag元素被拖动时反复触发dragend拖动操作完成时触发目的对象dragenter当被拖动元素进入目的元素所占据屏幕空间时触发...dragover当被拖动元素目的元素内时触发dragleave当被拖动元素没有放下就离开目的元素时触发整个拖拽事件触发顺序如下:dragstart-> drag -> dragenter ->...,以及dragover时dataTransfer中types不为0了,因为除了dragstart,drop以外事件,包括dragover,dragenter,dragleave中,drag data...所以dragover,dragenter,dragleave中做得更多应该是对数据处理,而不是应用效果。

6.4K21
  • 关于VUE3+TS利用递归组件完成TreeList设计与实现

    今天和大家探讨问题是,怎样设计一个类似vscode目录系统,也就是个treeList 不着急,您且听我慢慢道来 功能分析 我们这个目录系统设计,由于我司乃vue为主栈,我们就使用vue3为例开发...n.pid) } 实现方式 本质上来说,他是一个逐级递归分层数据,并且每一层数据格式都大致相当,只是细节不同,我们就可以使用vue递归组件,来解决问题 这就符合关注度分离原则 我们只关心当前这一层内容...3、dragover 当元素或者选择文本被拖拽到一个有效放置目标上时触发 4、dragleave当一个被拖动元素或者被选择文本离开一个有效拖放目标时触发 5、drop 当一个元素或是选中文字被拖拽释放到一个有效释放目标位置时触发...dragLeave dragEnter 当拖动元素或被选择文本进入有效放置目标时触发 dragleave当一个被拖动元素或者被选择文本离开一个有效拖放目标时触发 这俩是一对 ,一个移入一个移出...,值得注意dragEnter 发生在 dragLeave 之前 并且如果 移动到元素,这两个事件会再次执行,于是我们需要做特殊处理 // 保存最新进入节点, 为了解决移动到元素,这两个事件会再次执问题

    3.2K20

    html5鼠标拖动排序及resize实现方案分析及实践

    :dragstart-> drag -> dragenter -> dragover -> dragleave -> drop ->dragend 拖放事件事件详情 一个元素被拖放,他可能会经过很多个元素...过程对象事件: dragenter:源对象进入过程对象范围内,被拖拽对象进入过程对象时被触发 dragover:源对象在过程对象范围内移动,被拖拽对象在过程对象内移动时触发 dragleave:源对象离开过程对象范围...dragenterdragover事件默认行为是拒绝接受任何被拖放元素。因此,我们必须阻止浏览器这种默认行为。...e.preventDefault(); 如果drop接收盒子要想接收到元素,那么接收拖动元素 dragenterdragover必须阻止默认行为。... dragenter dragover 事件处理程序中,该属性将设置为dragstart 事件期间分配任何值,因此,可以使用effectAllowed来确定允许哪个效果。

    3.1K10

    掌握原生拖拽,类似拖拽需求,一网打尽

    ,希望看完对项目有所思考帮助。...【目标区域绑定事件】 drop 当被拖拽元素拖入目标区域结束是会触发该事件【目标区域绑定】 开始一个项目 首先先搭建了一个基本页面,我们先看下左边区域 <div class...,所有冠军与亚军名单都可以拖入中奖名单中去 并且我们看到左侧区域被拖拽元素绑定了dragstart,dragend事件,并且我们需要在被拖走元素指定draggable: true(这样设置后,该元素就默认可以拖拽了...@dragover 这个是当拖拽元素拖入目标元素中时,就会一直触发,当离开时就会停止触发,默认情况拖入目标区域时,被拖拽元素会一个回弹效果,这里需要阻止默认事件 有两种方式 1、利用vue事件修饰符...: true即可拖拽 目标区域dragover要设置阻止默认行为防止拖拽元素回弹 目标区域drop事件,拖拽结束触发 dragenter被拖拽元素拖入目标元素触发 dragleave被拖拽元素离开目标元素触发

    91520

    原生JS快速实现拖放(drag and drop)效果

    接下来我们就用原生jscss快速实现这样拖放效果: HTML HTML内容很简单,就是五个空容器一个可以被拖拽元素: html: 而不是来作为被拖拽元素。 CSS 实现样式时候,除了实现静态样式,一些过渡状态也需要增加样式以提升视觉体验:1....', dragLeave); droppable.addEventListener('dragenter', dragEnter); droppable.addEventListener('drop...setTimeout中异步设置可确保拖动操作开始后再隐藏draggable元素;2....dragEnterdragOver方法中我们需要通过preventDefault来取消事件以表明容器是一个合法droppable元素,不然容器drop事件将无法触发,接下来操作也将无法进行,详细解释请参考

    3.6K51

    手写原生代码专题 | 图片拖拽效果(一)

    除了这些事件,当你把元素拖动到一个有效放置目标上时,会依次触发以下事件: dragenter(只要被拖动元素进入目标位置,就会立即触发) dragover(dragenter事件触发后,会立即触发此事件...,如果被拖动元素,还在目标元素内持续拖动,会持续触发此事件) dragleave 或 drop(当被拖动元素,放置目标之外,dragover事件就会立即停止,触发dragleave事件;如果被拖动元素被放到了目标上...:宽高145px,图片路径我们调用了unsplash.com 提供图片服务,可以按照图片大小随机图片,我们需要图片测试数据时,这个服务非常有用; 为了让用户比较直观感受哪个元素正在被拖动,我们定义元素被拖动外观样式...在被拖动图片元素,绑定 dragstart dragend事件。 可被放置图片目标元素进行循环迭代,依次绑定 dragenter、dragover、dragleave、drop 事件。...接下来,我们来定义拖动至目标位置元素触发相关事件函数,进入目标元素时,触发 dragEnter:阻止默认浏览器行为,为其添加进入目标位置元素样式 .hovered;目标位置元素移动拖动元素

    2.2K30

    前端拾零02—H5拖放总结

    @csxiaoyao.com 前端拾零收录日常开发中一些很常见很基础前端操作,省去每次google甚至答案错误烦恼 github源码地址 1....随着H5普及,推荐使用相对简单H5原生api实现拖放功能。 H5拖放分为两部分:拖放元素目标元素,分别有不同属性监听事件 2....目标元素 3.1 目标元素监听事件 ondragenter: 拖放元素进入目标元素时触发事件,作用于目标元素 ondragover: 拖放元素目标元素移动时触发事件,作用于目标元素 ondrop:...拖放元素目标元素放置时触发事件,作用于目标元素 ondragleave: 拖放元素离开目标元素时触发事件,作用于目标元素 3.2 demo <div id="div1" ondragenter="<em>dragenter</em>...: 指定拖放视觉效果,只有搭配effectAllowed属性才会生效,<em>在</em><em>dragenter</em>中设置 (1) none: 不能拖放(除文本框外所有<em>元素</em><em>的</em>默认值) (2) move: 移动拖放<em>元素</em> (<em>3</em>) copy

    4.2K730

    拖拽牛逼,轻松实现一个自由拖拽组件

    dragenter:拖拽元素到目标上时触发 dragover:拖动元素目标元素中,持续触发 dragleave:离开目标元素时触发 drop:拖放元素到了目标元素中松开鼠标时触发 拖动放置行为 拖动事件中...拖动元素目标元素松手时添加元素到画布,即将组件元数据添加到list2中,元素所对应元数据记录也了这个组件画面中坐标位置。 然后dragend事件中取听以上动作。...$refs.targetContent.addEventListener("dragenter", this.dragenter); // 目标元素经过 必须要阻止默认行为 否则不能触发drop...$refs.targetContent.addEventListener("dragleave", this.dragleave); // 拖动元素目标元素松手时添加元素到画布 this....$refs.targetContent.addEventListener("dragleave", this.dragleave); // 拖动元素目标元素松手时添加元素到画布

    1.8K30

    前端拾零02—H5原生拖放总结 【原创】

    Email: sunjianfeng@csxiaoyao.com QQ: 1724338257 前端拾零收录日常开发中一些很常见很基础前端操作,省去每次google甚至答案错误烦恼...随着H5普及,推荐使用相对简单H5原生api实现拖放功能。 H5拖放分为两部分:拖放元素目标元素,分别有不同属性监听事件 2....目标元素 3.1 目标元素监听事件 ondragenter: 拖放元素进入目标元素时触发事件,作用于目标元素 ondragover: 拖放元素目标元素移动时触发事件,作用于目标元素 ondrop:...拖放元素目标元素放置时触发事件,作用于目标元素 ondragleave: 拖放元素离开目标元素时触发事件,作用于目标元素 3.2 demo <div id="div1" ondragenter="<em>dragenter</em>...: 指定拖放视觉效果,只有搭配effectAllowed属性才会生效,<em>在</em><em>dragenter</em>中设置 (1) none: 不能拖放(除文本框外所有<em>元素</em><em>的</em>默认值) (2) move: 移动拖放<em>元素</em> (<em>3</em>

    1.9K20

    前端文件上传功能实现原理

    HTML5实现拖放功能 有两个核心元素拖拽元素放置目标元素,通过这两个元素触发事件来实现拖放功能。...(1)拖拽元素要赋予draggable属性,属性值为true (2)放置目标元素要在dragoverdragenter事件值中阻止默认行为 (3)放置目标元素drop事件里可通过DataTransfer...对象获取拖拽元素信息 拖拽元素目标元素属性事件: DataTransfer 对象:拖拽对象用来传递媒介,使用一般为Event.DataTransfer。...事件:当拖曳元素进入目标元素时候触发事件,此事件作用在目标元素 ondragover 事件:拖拽元素目标元素移动时候触发事件,此事件作用在目标元素 ondrop 事件:被拖拽元素目标元素同时鼠标放开触发事件...放置目标事件顺序: (1) dragenter (2) dragover (3) dragleave 或 drop 只要有元素被拖动到放置目标上,就会触发 dragenter 事件(类似于 mouseover

    14310

    低代码设计器自由布局拖动实现原理

    dragenter:拖拽元素到目标上时触发 dragover:拖动元素目标元素中,持续触发 dragleave:离开目标元素时触发 drop:拖放元素到了目标元素中松开鼠标时触发 拖动放置行为 拖动事件中...拖动元素目标元素松手时添加元素到画布,即将组件元数据添加到list2中,元素所对应元数据记录也了这个组件画面中坐标位置。 然后dragend事件中取听以上动作。...$refs.targetContent.addEventListener("dragenter", this.dragenter); // 目标元素经过 必须要阻止默认行为 否则不能触发drop...$refs.targetContent.addEventListener("dragleave", this.dragleave); // 拖动元素目标元素松手时添加元素到画布 this....$refs.targetContent.addEventListener("dragleave", this.dragleave); // 拖动元素目标元素松手时添加元素到画布

    4.3K30

    【实战技巧】VUE3.0实现简易可拖放列表排序

    拖拽事件 可用拖拽事件一共有七个,其中三个是用于拖拽元素 dragstart 元素开始被拖动时触发 dragend 拖动操作完成时触发 drag 元素被拖动时触发 四个是用于释放区域 dragenter...当被拖动元素进入到释放区所占据屏幕空间时触发 dragover 当被拖动元素释放区内移动时触发 dragleave 当被拖动元素没有放下就离开释放区时触发 drop 当被拖动元素释放区里放下时触发步骤...首先给被拖放元素添加 draggable 属性并添加 dragstart 事件处理函数 定义拖放数据,本例定义是拖拽元素id 定义一个释放区域,添加 drop dragover 事件处理函数...const init = () => { bindEvents(); }; // 执行初始化函数 init(); })(document); VUE3...中实现思路 原生js实现拖拽排序我还没有弄,但是vue中就非常简单,因为我们触发任何事件时候,都可以拿到元素index,我们可以靠index轻易实现。

    2K40

    HTML5 进阶系列:拖放 API 实现拖放排序

    而 img 元素 a 元素都默认设置了 draggable 属性为 true,可直接拖放,如果不想拖放这两个元素,把属性设为 false 即可。 拖放事件 拖放事件由不同元素产生。...一个元素被拖放,他可能会经过很多个元素,最终到达想要放置元素内。这里,我暂时把被拖放元素称为源对象,被经过元素称为过程对象,到达元素我称为目标对象。不同对象产生不同拖放事件。...过程对象: dragenter:源对象开始进入过程对象范围内。 dragover:源对象在过程对象范围内移动。 dragleave:源对象离开过程对象范围。...监听每个元素 dragenter 事件,当源对象进入到当前元素里,就把源对象添加到该元素之前。这样子后面的元素就会被源对象挤下去了,实现了排序效果。...而且我简单试验中发现,就是 IE 中元素不设置 height 时候,不会触发 dragleave 事件。 更重要一点是 ios 安卓,完全不兼容。

    1.9K70

    HTML5 进阶系列:拖放 API 实现拖放排序

    而 img 元素 a 元素都默认设置了 draggable 属性为 true,可直接拖放,如果不想拖放这两个元素,把属性设为 false 即可。 拖放事件 拖放事件由不同元素产生。...一个元素被拖放,他可能会经过很多个元素,最终到达想要放置元素内。这里,我暂时把被拖放元素称为源对象,被经过元素称为过程对象,到达元素我称为目标对象。不同对象产生不同拖放事件。...过程对象: dragenter:源对象开始进入过程对象范围内。 dragover:源对象在过程对象范围内移动。 dragleave:源对象离开过程对象范围。...监听每个元素 dragenter 事件,当源对象进入到当前元素里,就把源对象添加到该元素之前。这样子后面的元素就会被源对象挤下去了,实现了排序效果。...而且我简单试验中发现,就是 IE 中元素不设置 height 时候,不会触发 dragleave 事件。 更重要一点是 ios 安卓,完全不兼容。

    1.6K10

    【HTML5】逐步分析如何实现拖放功能

    后来随着IE版本更新,拖放事件也慢慢完善,HTML5就以IE拖放功能制定了该规范,Firefox 3.5、Safari 3+、chrome以及它们之后版本都支持了该功能。...因此,图像、链接、文本 draggable 属性默认为 true,其余元素 draggable 属性默认为 false 实现拖放功能时有这样两个概念,分别是被拖动元素目标元素,它们都有各自支持事件...(2)目标元素事件 实现拖放功能过程中,目标元素事件有如下三个 事件 含义 dragenter 被拖放元素进入目标元素时触发 dragover 被拖放元素目标元素内时触发(频繁触发) dragleave...,除非拖放事件结束或者被拖放元素离开目标元素 dragleave事件 其触发条件正好与 dragenter 事件相反,它是当被拖放元素离开目标元素时触发,经过测试,离开目标元素条件是:被拖放元素一半以上面积离开目标元素...三、dataTransfer对象 上面只是简简单单实现了拖放功能,但并没用利用该功能做出什么实际性功能,这里我们介绍一个拖放事件中事件对象一个特别重要属性——dataTransfer 我们通过

    1.5K10

    js原生拖拽两种方法

    一.mousedown、mousemovemouseup 拖着目标元素页面任意位置 如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件使用顺序不能颠倒。...2、绑定拖拽元素,移动鼠标松开后是对document绑定,因为移动是整个div。 3、点击:a= 获取当前鼠标坐标、b =div距浏览器距离、c = 鼠标div内部距离=a-b。...基本思路: 拖拽状态 = 0鼠标元素按下时候{ 拖拽状态 = 1 记录下鼠标的xy坐标 记录下元素xy坐标 } 鼠标元素移动时候{...当拖拽元素拖到一个目标元素时,目标元素会触发以下事件 dragenter dragover dragleave drop 拖拽元素到目标上,就会触发dragenter事件(类比mouseover)...当拖动元素目标元素中,就会持续触发dragover事件 离开目标元素,触发dragleave事件(类比mouseout) 若拖放元素到了目标元素中(目标元素中松开鼠标),就会触发drop

    3.9K30

    理论 | HTML5 进阶系列:拖放 API 实现拖放排序

    一个元素被拖放,他可能会经过很多个元素,最终到达想要放置元素内。这里,我暂时把被拖放元素称为源对象,被经过元素称为过程对象,到达元素我称为目标对象。不同对象产生不同拖放事件。...3、dragend:源对象拖放结束。 过程对象: 1、dragenter:源对象开始进入过程对象范围内。 2、dragover:源对象在过程对象范围内移动。...3dragleave:源对象离开过程对象范围。 目标对象: 1、drop:源对象被拖放到目标对象内。...3、监听每个元素 dragenter 事件,当源对象进入到当前元素里,就把源对象添加到该元素之前。这样子后面的元素就会被源对象挤下去了,实现了排序效果。...而且我简单试验中发现,就是 IE 中元素不设置 height 时候,不会触发 dragleave 事件。 更重要一点是 ios 安卓,完全不兼容。

    1.3K31

    html5 新特性

    该属性用于元素中添加,移除及切换 CSS 类。       classList 属性是只读,但你可以使用 add() remove() 方法修改它。     ...false - 元素中不存在该类名       3.item(index) 返回类名元素索引值。...目标元素事件 : 事件对象为目标元素     dragenter , 进入目标元素触发,相当于mouseover     dragover ,进入目标、离开目标之间,连续触发     dragleave..., 离开目标元素触发,相当于mouseout     drop , 目标元素释放鼠标触发       事件执行顺序 :drop不触发时候     dragstart > drag >...dragenter > dragover > dragleave > dragend       事件执行顺序 :drop触发时候(dragover时候阻止默认事件)     dragstart

    1.8K100
    领券