draggable拖拽的时候将一个元素设置禁止拖拽和被拖拽

最新推荐文章于 2024-06-28 20:03:11 发布
最新推荐文章于 2024-06-28 20:03:11 发布
阅读量821 收藏
点赞数
分类专栏： 插件 文章标签： java html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m_uncle/article/details/130346480
版权

filter=“.unmover”
:class=“{unmover:index==='000'}”
表示当前不能被拖拽

:move=“onMoveCeshi” 表示不能被停靠，其他元素不可以与当前元素调换位置

 

 

 

m_uncle
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
draggable禁止拖动_vue.draggable disabled 开启和禁用拖动
weixin_39635657的博客
12-22 8181
vue.draggable disabled 开启和禁用拖动通过disabled属性实现开启或禁用vue.draggable的拖拽效果。disabled属性{{item.name}}//导入draggable组件import draggable from 'vuedraggable'export default {//注册draggable组件components: {draggable,},da...
Jquery UI实现一次拖拽多个选中的元素操作
10-21
在实现拖拽多个元素的效果时，关键在于创建一个代表所有被选元素的“代理”DOM元素。你可以通过重写`drag`事件的`helper`函数来实现这一点，返回一个新的包含所有拖拽元素的集合。这样，当用户拖动代理元素时，实际...
【Vue 项目】使用 vuedraggable 实现拖拽效果时遇到的问题及解决方案总结（允许 el-table 行拖拽、部分元素不允许拖拽、拖拽避免影响文字复制和输入框输入文字）
热门推荐
一个努力学习的程序猿
04-11 2万+
在最近的开发过程中，遇到了关于拖拽排序的功能需求。在这里向大家推荐使用 vuedraggable。
vue2中vuedraggable设置部分元素不可拖拽，不可移动
最新发布
weixin_44784401的博客
06-28 871
vue2中vuedraggable设置部分元素不可拖拽，不可移动
draggable拖拽列表设置某一条元素禁止被拖拽
小羊的博客
09-08 2564
使用draggable拖拽列表设置某一条元素不能被拖拽 filter=".unmover" :move="onMove"
html5设置图片无法拖动,html5规定元素是否可拖动的属性draggable
weixin_36241866的博客
06-04 756
实例一个可拖动的段落：这是一个可拖动的段落。浏览器支持IEFirefoxChromeSafariOperaInternet Explorer 9+, Firefox, Opera, Chrome, and Safari 支持 draggable 属性。注释：Internet Explorer 8 以及更早的版本，不支持 draggable 属性。定义和用法draggable 属性规定元素是否可拖动...
vuedraggable拖拽列表设置某一条元素禁止被拖拽
小马甲
11-15 3203
vuedraggable拖拽列表设置某一条元素禁止被拖拽
vue.draggable实现拖拽排序，设置可拖拽位置以及不允许拖拽元素
GardJasmin的博客
02-22 7656
<table> <!--固定表头--> <tr> <th width="60">排序</th> <th width="200">部门名称</th> <th width="200">部门类型</th> </tr> <!--拖拽内容--> <draggable tag="tbody" :...
vue和H5 draggable实现拖拽并替换效果
10-15
主要为大家详细介绍了vue和H5 draggable实现拖拽并替换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Draggable Elements 元素拖拽功能实现代码
10-28
在JavaScript中，实现元素拖拽（Draggable Elements）功能是一项常见的任务，特别是在创建交互式用户界面时。这个功能可以通过原生的DOM事件处理程序或使用第三方库如jQuery UI、Interact.js等轻松实现。不过，为了...
Vue使用vue-draggable 插件在不同列表之间拖拽功能
10-15
onMove(event, draggingElement) { // 阻止元素在拖动时被排序 if (event.source.index === event.target.index && event.container === event.parent) { return false; } }, onEnd(event) { // 拖动结束后的处理 ...
如何使用jQuery Draggable和Droppable实现拖拽功能
10-27
本篇文章是对使用jQuery Draggable和Droppable实现拖拽功能的方法进行了详细的分析介绍，需要的朋友参考下
vue3中vue-draggable实现图片拖拽
qq_43341001的博客
08-03 1294
vue3中vue-draggable实现图片拖拽
(vue)draggable的使用:
nyf_unknow的博客
06-06 501
(vue)draggable的使用:
vuedraggable怎么设置把两个区块直接禁止拖拽？
Haines
01-19 2019
答案：设置group属性不同的值，即可。 代码参考： <template> <div> <!--使用draggable组件--> <div class="itxst"> <span>A、B列可以相互拖动，无法拖到C列</span> <div class="col"> <div class="title" >A列</div> <draggable v-model="arr1"
vuedraggable 移动时禁止拖拽指定控件到指定容器组
weixin_58018769的博客
04-26 1999
在move属性里面绑定一个事件，return给它true或者false，打印一下事件，draggedContext里面的element就是当前拖拽的控件，这个to里面则是你当前移动到的容器的class，有了这两个就可以开始判断了
vue通过draggable实现拖拽功能
qq_40591925的博客
09-02 2216
【代码】vue通过draggable实现拖拽功能。
H5利用drag拖拽元素的时候出现禁止符号
weixin_41276201的博客
06-03 813
1.将拖拽经过的容器加上处理的dragover和gragenter事件的方法。表示经过的元素允许你要拖拽的元素移动。
使用draggable拖拽完多个元素后，再次拖拽这些元素，移动的都是最后一次拖拽的元素
07-11
如果拖拽完多个元素后再次拖拽时移动的都是最后一次拖拽的元素，可能是因为在处理拖拽事件时，没有正确更新每个元素的状态。 当你拖拽一个元素时，需要将该元素的引用存储在一个变量中，以便在后续的事件中使用。在`dragstart`事件中，你可以使用`event.dataTransfer.setData()`方法来存储被拖拽元素的唯一标识。然后，在`drop`事件中，你可以使用`event.dataTransfer.getData()`方法来获取被拖拽元素的唯一标识，并据此找到对应的元素，并进行位置更新。 以下是一个示例代码，用于实现多个元素的拖拽并正确更新元素位置： ```javascript let draggedElement; // 保存当前被拖拽的元素 function handleDragStart(event) { draggedElement = event.target; event.dataTransfer.setData('text/plain', event.target.id); // 存储被拖拽元素的唯一标识 } function handleDragOver(event) { event.preventDefault(); } function handleDrop(event) { event.preventDefault(); const droppedElementId = event.dataTransfer.getData('text/plain'); // 获取被拖拽元素的唯一标识 const droppedElement = document.getElementById(droppedElementId); // 根据唯一标识找到对应的元素 event.target.parentNode.insertBefore(droppedElement, event.target.nextSibling); draggedElement = null; // 清空被拖拽元素的引用 } const draggableElements = document.querySelectorAll('[draggable="true"]'); draggableElements.forEach(element => { element.addEventListener('dragstart', handleDragStart); element.addEventListener('dragover', handleDragOver); element.addEventListener('drop', handleDrop); }); ``` 请确保每个拖拽元素都有一个唯一的`id`属性，以便在`handleDrop`函数中正确找到对应的元素。如果元素没有`id`属性，你可以根据实际情况使用其他的唯一标识符。 通过在`dragstart`事件中存储被拖拽元素的唯一标识，并在`drop`事件中根据唯一标识找到对应的元素，可以确保拖拽多个元素后再次拖拽时移动的是正确的元素。希望这对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值