js 拖拽时避免文字被选中

最新推荐文章于 2023-11-24 16:04:33 发布
最新推荐文章于 2023-11-24 16:04:33 发布
阅读量1.1k 收藏
点赞数
文章标签： IE Firefox Opera
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuzijingaip/article/details/83439934
版权 
<html>
<title>alixixi.com</title>
<head>
<script type="text/javascript">

function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
	target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
	target.style.MozUserSelect="none"
else //All other route (ie: Opera)
	target.onmousedown=function(){return false}
target.style.cursor = "default"
}

//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"

</script>
</head>

<body>
<div id="test" style="background:#f1f1f1;border:1px #000  dotted">这里不能选择</div>
<script type="text/javascript">
var somediv=document.getElementById("test")
disableSelection(somediv) //disable text selection within DIV with id="mydiv"
</script>
</body>
</html>
<a href="http://www.6tianf.com">欢迎访问六天赋网页制作自学基地</a>
wuzijingaip
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现单元格拖拽效果
11-20
返回`false`防止文字被选中跟随拖动。 - `onmouseup`事件监听鼠标释放，此时需要判断拖动后的单元格位置，并找到相邻单元格中距离最近的一个，更新拖动单元格的新位置。 6. **计算相邻单元格的距离**： 在鼠标抬...
基于原生JavaScript拖拽效果的实现.pdf
最新发布
01-02
（1）首先获取要进行拖拽的物体对象oD，拖动oD物体时按下鼠标后触发onmousedown事件，当拖动物体时会出现选中网页中文字的现象，这里需要用return false来阻止事件的默认行为。 ```javascript oD.onmousedown=...
拖拽时防止页面文字选中
weixin_38222276的博客
12-23 549
的默认行为，我们的拖动不再会选中文本或者页面上的元素。一个比较简单的办法就是在。
js中禁止拖动时选中文字的兼容方式
lulu_678的博客
02-27 933
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
js或css指定元素点击时内容不可被选中
weixin_33717298的博客
10-10 424
一、css3中可以使用"user-select"属性： body{ -webkit-user-select:none;/*谷歌 /Chrome*/ -moz-user-select:none; /*火狐/Firefox*/ -ms-user-select:none; /*I...
鼠标拖拽问题，不选中文本&不触发单击事件
扶摇的博客
11-24 1245
mousemove鼠标拖拽需要注意什么问题？鼠标拖拽会依次触发mousedownmousemovemouseupclick事件。很多时候在一个元素的时候，应该怎么避免在拖拽时不触发单击事件？不触发文本选中问题？
js和css禁止dom被拖拽和选中
Combarlala的博客
09-11 1119
添加如下代码 ondragstart="return false" onselectstart="return false;" style="-moz-user-select: none; -khtml-user-select: none; user-select: none"
JavaScript模仿鼠标拖动选择功能
03-20
这个功能可以让用户通过鼠标拖动来选取一个矩形区域内的元素，比如在文本编辑器中选择文字，或者在图像编辑工具中选取部分图像。下面将详细解释如何实现这一功能。 首先，我们需要监听鼠标的`mousedown`、`...
bootstrap模态框实现拖拽效果
08-31
4. **防止文字选中和模态框越界**： - 为防止拖动时背景文字被选中，可以应用CSS样式`user-select: none`到模态框上，以禁用文本选择。对于不同浏览器的兼容性，可以使用浏览器前缀，如`-webkit-user-select`, `-...
非常简单的网页拖拽效果js代码
06-12
4. **阻止默认行为**：为了避免拖拽时选中文字或触发其他默认行为，可能需要调用`event.preventDefault()`。 5. **结束拖拽**：在`mouseup`事件中，停止对`mousemove`事件的监听，拖拽操作结束。 在提供的`index....
JS小技巧 ----- 在onmousedown事件下避免文本选取
k909397116的博客
11-10 514
场景 在浏览器中，当我们长按鼠标左键后会开始选取文段，松开鼠标后再对着文本长按左键，就可以移动文本的副本到浏览器搜索栏中了。现在我们要通过JS实现长按元素来拖拽一个元素，但是当无意间选中文本只后，再来拖拽这个元素，会引起文本和元素一起移动，还会发生一些不合逻辑的拖拽异常。 解决方式 对拖拽元素的事件 onmousedown 的响应函数最后一行加上return false; 即可解决这个问题。 ...
禁止拖拽时选中文本的方法
(づ｡◕‿‿◕｡)づ
06-22 4436
▶ JS方法：if (typeof(element.onselectstart) != "undefined") { // IE下禁止元素被选取 element.onselectstart = new Function("return false"); } else { // firefox下禁止元素被选取的变通办法
vue/javascript 实现拖动功能是文字总会被选中的问题
wenbintian的博客
06-24 3956
你们是否遇到过按住鼠标左键拖动div块时经常页面上的文字会被选中了，这样造成了不好的开发体验。以下实例能帮你们解决这一问题。 //鼠标按下的事件 onMousedown(event, column) { const resizeProxy = this.$refs.resizeProxy; resizeProxy.style.left = this.d...
JS jquery禁止页面文字选中和拖拽
Whales_w的博客
12-28 1440
// 禁止选中 document.body.onselectstart = function(){ 　　return false; } // 禁止图片拖拽 var imgs=$("img"); imgs.on("dragstart",function(){return false;});
【JavaScript】原生js事件中事件绑定、磁性吸附，以及拖拽选中文字的结决方案
Owen的博客
01-28 267
事件绑定 <script> window.onload = function () { var oDiv = document.getElementById('btn') if (oDiv.attachEvent) { //低版本的 ie oDiv.attachEvent('onclick', function () { alert(a) }) oD
35、JavaScript中DIV的完美拖拽---解决拖拽中的文字选中的问题
Learning
06-20 5739
1、拖拽中的文字选中问题        1.1  阻止默认事件        1.2  IE下拖拽有问题               -- 事件捕获 2、代码 #div1 {width:100px; height:100px; background:red; position:absolute;} 无标题文档 window.onload=function () { var o
拖动时禁止选中文字
fk129
06-18 1122
js 全局 document.body.onselectstart = document.body.ondrag = function(){ 　　return false; } css 元素样式 -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
div拖拽时取消文字选中默认事件的解决方法
swallowliyan的专栏
08-27 9326
当我们对div进行拖 拽时，会发现把div里的文字也选中了，其实我并不想选中文字 ，怎么解决呢？ 我们分两种情况说，一种情况是直接给对象加事件如obj.onmousedown； 另外一种是为对象绑定事件addEventListener。 先说第一种：比较简单，高版本的浏览直接加return false来阻止默认事件，低版本的IE系列则用obj.capature&&obj.capature();
fabric.js 拖动框多选时给每个被选中的元素有提示框
08-07
### 回答1： 可以在选中元素时遍历所有被选中的元素，并在每个元素上添加一个提示框。可以使用 fabric.js 中的 "selection:created" 事件来监听选中元素的变化。在事件回调函数中，遍历选中元素的数组，并在每个元素上添加一个提示框。 例如： ``` canvas.on('selection:created', function(e) { var selectedObjects = canvas.getActiveObjects(); for (var i = 0; i < selectedObjects.length; i++) { var obj = selectedObjects[i]; var box = new fabric.Rect({ left: obj.left, top: obj.top, width: obj.width, height: obj.height, fill: 'rgba(255,0,0,0.5)', selectable: false }); obj.box = box; canvas.add(box); } }); ``` 上面的代码片段在选中元素时遍历所有被选中的元素，并在每个元素上添加一个半透明红色的提示框。 ### 回答2： 在fabric.js中，要为每个被选中的元素添加提示框，可以按照以下步骤进行操作： 首先，需要定义一个提示框的类，这个类可以继承自fabric.js的fabric.Object类。在这个类中，可以定义提示框的外观样式和内容等相关属性。例如可以添加一个文本框作为提示框的内容，使用set()方法设置文本框的文本内容。 其次，当用户进行多选操作时，可以通过监听canvas的"selection:created"事件获取被选中的元素，并遍历这些元素，为每个被选中的元素创建一个对应的提示框。同时，需要为每个提示框设置相关属性，例如位置、尺寸、样式等。可以通过fabric.js的add()方法将提示框添加到canvas中。 当用户进行拖动操作时，可以监听canvas的"object:moving"事件，获取正在被拖动的元素，并更新相应的提示框的位置，保持和被拖动元素的位置一致。 当用户取消选中某个元素或者拖动结束时，可以通过监听canvas的"selection:cleared"和"object:moved"事件，分别移除相应的提示框。 综上所述，通过监听canvas的相关事件以及使用fabric.js提供的API，我们可以实现在拖动框多选时给每个被选中的元素添加提示框的功能。 ### 回答3： 在fabric.js中实现拖动框多选时为每个被选中的元素添加提示框，可以通过以下步骤来实现： 1. 首先，需要使用`selection: 'group'`来启用拖动框多选功能。可以在canvas对象的初始化代码中添加该属性，例如： ```javascript var canvas = new fabric.Canvas('canvas', { selection: 'group' }); ``` 2. 接下来，需要为选择的元素创建提示框。可以通过自定义的`fabric.Rect`对象来实现，然后将其添加到选中的元素上，例如： ```javascript canvas.on('selection:created', function(event) { var selectedObjects = event.selected; selectedObjects.forEach(function(object) { var boundingRect = object.getBoundingRect(); var tooltipRect = new fabric.Rect({ width: boundingRect.width, height: 30, fill: 'yellow', opacity: 0.7, left: boundingRect.left, top: boundingRect.top - 30 }); canvas.add(tooltipRect); }); }); ``` 3. 最后，需要监听选择状态的更新，在选择状态更新时，更新提示框的位置和大小。可以使用`selection:updated`事件监听选择状态更新，并更新提示框的位置和大小，例如： ```javascript canvas.on('selection:updated', function(event) { var selectedObjects = event.selected; selectedObjects.forEach(function(object) { var boundingRect = object.getBoundingRect(); var tooltipRect = canvas.item(0); tooltipRect.set({ width: boundingRect.width, left: boundingRect.left, top: boundingRect.top - 30 }); canvas.renderAll(); }); }); ``` 以上是基本的实现步骤，你可以根据自己的需求进行进一步的定制和美化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值