vue拖动鼠标阻止文本被选

最新推荐文章于 2024-08-07 14:51:53 发布
最新推荐文章于 2024-08-07 14:51:53 发布
阅读量1k 收藏
点赞数
分类专栏： 项目 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30351747/article/details/119649578
版权
在PC端，当用户拖动一个悬浮按钮时，页面上的文本可能会意外地被选中，影响用户体验。通过在悬浮按钮的onmousemove事件中添加阻止默认事件的代码可以解决这个问题。只需在事件处理函数中写入`event.preventDefault();`即可防止文本被选中，提升用户交互体验。
摘要由CSDN通过智能技术生成
vue拖动鼠标阻止文本被选

描述：pc端，拖动悬浮按钮，页面文本会随着悬浮按钮的拖动出现被选，虽然没什么影响，但是很影响用户体验。

如图：（图字是左侧，博主左右不分）
在这里插入图片描述

修复
onmousemove(e){
   let et= e || window.event;
   et.preventDefault();  // 阻止默认事件发生
}

copy上面两行代码就可以解决

Mr.Meng_95
关注
专栏目录
vue 实现文本的拖拽_基于Vue实现拖拽效果及阻止拖拽
weixin_33279929的博客
12-28 889
参考链接中讲的比较详细，我只使用了其中自定义指令的方法。整体代码如下：exportdefault{data() {return{}},directives: {drag: {//指令的定义bind: function(el) {let oDiv= el; //获取当前元素oDiv.onmousedown = (e) =>{//算出鼠标相对元素的位置let disX = e.clientX -oD...
Vue实现可移动水平时间轴
10-15
一个水平时间轴通常包含一系列的里程碑或事件，每个事件都有一个特定的时间点，并且用户可以通过拖动或点击导航按钮来移动时间轴，查看不同时间段的数据。在这个场景中，Vue.js的响应式特性可以帮助我们轻松地处理...
vue/javascript 实现拖动功能是文字总会被选中的问题
wenbintian的博客
06-24 4164
你们是否遇到过按住鼠标左键拖动div块时经常页面上的文字会被选中了，这样造成了不好的开发体验。以下实例能帮你们解决这一问题。 //鼠标按下的事件 onMousedown(event, column) { const resizeProxy = this.$refs.resizeProxy; resizeProxy.style.left = this.d...
vue实现页面内容禁止选中功能,仅输入框和文本域可选
12-13
上网上翻了翻，共找到两种方式 CSS样式控制，只需将下面代码复制到 vue应用下，index.html文件中的body标签上 *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:none; /*IE10*/ user-select:none; } input{ -webkit-user-select:au
js解决鼠标拖拽时，会自动选中文字问题
jiurikeai的博客
07-30 358
当触发mousedown事件时，有时会选中下方的文字或内容，出现不友好的样式，为防止问题出现，解决方法如下：核心代码：document.onselectstart = function() { return false; };//解决拖动会选中文字的问题
vue实现浏览器禁止鼠标选中文字&禁止右键&禁止F12键
hello，word！
11-22 3205
1. 禁止鼠标选中文字 2.禁止右键 3. 禁止F12键 4. 使用css样式实现禁用选中文字 5. 其他样式自己尝试吧 6. img标签禁用选中、拖拽、右键
禁止鼠标选中文字
u010002783的专栏
09-06 714
禁止鼠标选中文字：在页面中写 onselectstart="return false" firefox 实现就更简单了 .aa{-moz-user-select:none;} --------------------------------- ..你直接在    这里加的话， 整个页面都不能复制文字了吧。。  如果是针对IE浏览器的话 ，C
vue防止鼠标左键拖动选中页面的元素
最新发布
fakuangjingling的博客
08-07 303
【代码】vue防止鼠标左键拖动选中页面的元素。
vue 禁止拖拽选中文字、禁止复制、禁止右键菜单
weixin_41706307的博客
04-29 3812
开发后台管理系统供内部人员使用时，一般是需要做一些页面方面的禁用设置。常见的禁止右键菜单，禁止复制，禁止拖拽选中文字以及禁止F12打开控制台等。
vue拖动实现布局，添加元素，拖拽元素，设置文本大小
11-17
例如，如果只允许水平拖动，你可以阻止 `dragover` 和 `dragenter` 事件的默认行为，当鼠标垂直坐标超出一定范围时。 5. **设置文本大小**： 在 Vue 组件内，你可以定义一个数据属性（如 `textSize`），并将其与...
vue实现div可拖动位置也可改变盒子大小的原理
10-14
在Vue中实现一个div元素既可以拖动改变位置，又可以调整大小的功能，涉及到的核心技术包括事件监听、CSS定位以及DOM操作。下面将详细介绍实现这一功能的步骤和原理。 首先，我们需要监听鼠标事件来处理拖动和改变...
鼠标移动div时禁止选中div中的文字的方法
09-25
在移动div的时候偶尔会选中div中的文字，同时会影响div移动的流畅性，下面与大家分享个不错的解决方法，有类似情况的朋友可以参考下
Vue组件Draggable实现拖拽功能
01-19
Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。 具体说明，请参考：学习链接 npm官方演示： vuedraggable特性： 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2的国度动画兼容 支持撤销操作 当需要完全控制时，可以抛出所有变化 可以和现有的UI组件兼容 使用 安装： npm install vuedraggable 页面引入： import draggable from 'vuedraggable' data定义数据进行模拟：这
Vue中div contenteditable 的光标定位方法
10-18
今天小编就为大家分享一篇Vue中div contenteditable 的光标定位方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
html vue css 文字可不复制或者不可鼠标选中
qq_38946996的博客
01-15 425
*{ -moz-user-select:none;/*火狐*/ -moz-user-select: -moz-none; -o-user-select: none; -webkit-user-select:none;/*webkit浏览器*/ -ms-user-select:none;/*IE10*/ -khtml-user-select:none;/*早期浏览器*/ user-select:none; }
禁止鼠标选中div中的文本
qq_60438949的博客
12-30 287
禁止鼠标选中div文本事件
用js onselectstart事件鼠标禁止选中文字
aliven1的博客
03-29 1143
<div style="width:100px" onselectstart="return false">这里面的文字是不能被鼠标选中的</div>$(this).get(0).onselectstart=function(){return false;};
【Vue 项目】使用 vuedraggable 实现拖拽效果时遇到的问题及解决方案总结（允许 el-table 行拖拽、部分元素不允许拖拽、拖拽避免影响文字复制和输入框输入文字）
热门推荐
一个努力学习的程序猿
04-11 2万+
在最近的开发过程中，遇到了关于拖拽排序的功能需求。在这里向大家推荐使用 vuedraggable。
VueDraggable 子元素input选中文字会出现拖动
runOnWay的博客
12-09 1777
vuedraggable，el-input
Vue2实现自定义拖动指令的教程
- 阻止默认的拖动行为，以避免在拖动元素时，浏览器默认的文本选择行为。 - 实现拖动时的反馈效果，如元素的阴影或高亮显示。 - 为拖动指令添加配置选项，使得开发者可以控制拖动行为的不同方面，如拖动时的元素样式...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值