js 拖拽时避免文字被选中

<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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答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、付费专栏及课程。

余额充值