【vue.draggable】判断被拖拽元素是否在目标区域内并阻止拖拽

最新推荐文章于 2024-05-05 11:59:49 发布
最新推荐文章于 2024-05-05 11:59:49 发布
阅读量3.4k 收藏 5
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011364720/article/details/126750684
版权
场景

使用group clone的拖拽特性，如果元素从左边拖到右边了，但是又移出了右侧区域（也许是用户反悔了），我希望被拖拽元素不要插入到右侧。
插件默认操作是继续添加到模板区域的。
通过比对我发现了event.originalEvent.cancelable这个属性在是否目标区域放置时有区别

实现

被拖拽区域（右侧）有@add事件（也就是draggable标签里面），可以通过判断事件第一个参数event.originalEvent.cancelable是否为false，如果为false，配合event.newIndex去删除目标分组的对应元素。event.newIndex表示插入的元素在目标数组的第几项

酒后不debug
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
draggable禁止拖动_vue.draggable disabled 开启和禁用拖动
weixin_39635657的博客
12-22 8137
vue.draggable disabled 开启和禁用拖动通过disabled属性实现开启或禁用vue.draggable的拖拽效果。disabled属性{{item.name}}//导入draggable组件import draggable from 'vuedraggable'export default {//注册draggable组件components: {draggable,},da...
Vue.Draggable拖拽功能的配置使用方法
10-17
主要为大家详细介绍了Vue.Draggable拖拽功能配置使用的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue3+ts:实现在某个区域拖拽元素
盼涧
07-20 424
vue3+ts进行某个区域的元素拖拽
vue中vuedraggable拖拽插件使用，指定范围拖拽。
最新发布
weixin_69890748的博客
05-05 513
在后台管理系统中，需求添加某些配置选项，并且选项可以拖拽调整顺序，指定按钮图标允许拖拽，不是整行拖拽。最终将配置的选项传给后端保存。vue.draggable中文文档 - itxst.com。
vuedraggable 移动时禁止拖拽指定控件到指定容器组
weixin_58018769的博客
04-26 1927
在move属性里面绑定一个事件，return给它true或者false，打印一下事件，draggedContext里面的element就是当前拖拽的控件，这个to里面则是你当前移动到的容器的class，有了这两个就可以开始判断了
vue 在固定区域内拖拽
Mr_wuying的博客
03-03 2511
<template> <div id='pondModel'> <span v-for='(item,index) in 6' :key='index' @mousedown="move" ></span> </div> <template> methods: { move(e){ let odiv = e.target let disX =e.clientX - odiv.offsetLe
Vue.Draggable -- 实现元素拖拽
i_Satan的博客
07-21 622
vuedraggable 元素拖拽
vue3.0 + draggable 中解决某个元素不能拖曳
weixin_53849180的博客
08-25 2537
vue3.0 + draggable 中如何设置部分元素不能拖曳？
vue.draggable实现拖拽排序，设置可拖拽位置以及不允许拖拽元素
GardJasmin的博客
02-22 7537
<table> <!--固定表头--> <tr> <th width="60">排序</th> <th width="200">部门名称</th> <th width="200">部门类型</th> </tr> <!--拖拽内容--> <draggable tag="tbody" :...
vue.draggable实现表格拖拽排序效果
01-19
本文实例为大家分享了vue.draggable实现表格拖拽排序效果展示的具体代码，供大家参考，具体内容如下 主要使用vuedraggable和sortablejs两个组件。 1、安装组件 npm install vuedraggable npm install sortablejs 2...
Vue.Draggable实现拖拽效果
08-30
Vue.Draggable实现拖拽效果 Vue.Draggable是一个基于Vue.js的拖拽插件，能够帮助开发者快速实现拖拽效果。下面将对Vue.Draggable的实现原理和使用方法进行详细讲解。 一、安装和配置 要使用Vue.Draggable，首先...
vue3全局自定义指令实现div在指定区域拖拽
qq_47657875的博客
07-27 633
【代码】vue3全局自定义指令实现div在指定区域拖拽。
【Vue版】实现拖拽、排序效果（注意，这个方法在chrome谷歌浏览器上面不适用，dragend会情不自禁触发drag事件先执行，有点像浏览器的一个bug）
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
05-28 6404
HTML5为所有HTML元素规定了一个draggable属性，表示元素是否可以拖动，图像和链接的draggable属性自动被设置成了true，而其他元素这个属性的默认值都是false。
使用iview旧版本的modal设置draggable如何控制拖拽不拖出屏幕边缘
风如也的博客
05-31 644
iview的4.6.0版本之前使用modal的dragable属性是不能控制是否能拖出屏幕边缘的，如果想要在拖拽过程中设置不能拖出屏幕边缘，效果如下图所示：控制台查看元素，可以发现，iview的Moda在l拖拽时的class是，且是通过改变这个className元素的left和top属性。那么我们可以使用用来监听元素的属性变化、用来获取指定元素的top和left值，用来获取指定元素距离浏览器窗口的位置。
js原生实现拖拽，四角四边缩放同时实现边界判断
marendu的博客
09-05 1万+
实现功能： 可拖拽、4角可缩放，4边拖拽可改变宽高； <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0 } ...
vuedraggable实战：结合具体应用场景实现列表内拖拽排序、列表间移动、复制，介绍、安装、使用、坑点及解决方案
热门推荐
学海无涯，行者无疆
12-05 4万+
从实战角度介绍如何使用Draggable实现一个配置功能，用到的关键属性和方法，需要注意的事项，坑点以及解决方案。
鼠标拖拽窗口效果（不允许拖出屏幕的可视区域）
皮卡丘の开发之路
08-25 7031
鼠标拖拽窗口效果（不允许拖出屏幕的可视区域）
vuedraggable 实现拖拽功能
EsquireY的博客
08-17 3908
项目需求 简单实现一个vue拖拽小案例，右侧选项区拖拽到左侧目标区域，拖动成功的不能再次拖动，并改变颜色。 安装 vuedraggable 插件 cnpm i -S vuedraggable 页面直接引用 import draggable from “vuedraggable”; … components: { draggable }, 源码参考 <template> <div class="container"> <div class="conte.
vuedraggable参数
ismayi的专栏
06-12 481
【代码】vuedraggable参数。
vue.draggable.next实现按钮在区域内任意拖拽移动
07-15
你可以使用 `vue.draggable.next` 插件来实现按钮在区域内任意拖拽移动的功能。首先，确保你已经安装了 `vue.draggable.next` 插件。 接下来，在你的 Vue 组件中，你可以使用 `v-draggable` 指令来使按钮可拖拽。在按钮元素上添加 `v-draggable` 指令，并指定一个唯一的标识符，以便在拖拽事件中识别该按钮。 例如： ```html <template> <div> <div class="drag-area"> <button v-draggable="buttonId" @drag="handleDrag">Drag me</button> </div> </div> </template> <script> export default { data() { return { buttonId: 'myButton' }; }, methods: { handleDrag(event) { // 处理拖拽事件 console.log('Button dragged', event); } } }; </script> <style scoped> .drag-area { width: 300px; height: 300px; border: 1px solid #ccc; } </style> ``` 在上面的示例中，我们在按钮上添加了 `v-draggable` 指令，并指定了 `buttonId` 作为唯一标识符。当按钮被拖动时，`handleDrag` 方法会被调用，并传入一个事件对象。 你可以根据需要在 `handleDrag` 方法中处理拖拽事件。例如，你可以更新按钮的位置或执行其他相关操作。 记得在组件中引入和注册 `vue.draggable.next` 插件： ```javascript import { createApp } from 'vue'; import { createRouter, createWebHistory } from 'vue-router'; import draggable from 'vuedraggable'; const app = createApp(App); const router = createRouter({ history: createWebHistory(), routes }); app.use(router); app.component('draggable', draggable); app.mount('#app'); ``` 这样，你就可以使用 `vue.draggable.next` 插件来实现按钮在区域内任意拖拽移动的功能了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值