解决拖动div时，文字被选中问题

最新推荐文章于 2024-09-17 22:59:44 发布

___h-

最新推荐文章于 2024-09-17 22:59:44 发布

阅读量276

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/weixin_49790897/article/details/136101072

版权

在可拖动div加上css样式

user-select:none;

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

___h-

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

html 取消选中事件,div拖拽时取消文字选中默认事件的解决方法

weixin_39967405的博客

06-05

591

当我们对div进行拖拽时，会发现把div里的文字也选中了，其实我并不想选中文字，怎么解决呢？我们分两种情况说，一种情况是直接给对象加事件如obj.onmousedown；另外一种是为对象绑定事件addEventListener。先说第一种：比较简单，高版本的浏览直接加return false来阻止默认事件，低版本的IE系列则用obj.capature&&obj.capatur...

js解决鼠标拖拽时，会自动选中文字问题

jiurikeai的博客

07-30

293

当触发mousedown事件时，有时会选中下方的文字或内容，出现不友好的样式，为防止问题出现，解决方法如下：核心代码：document.onselectstart = function() { return false; };//解决拖动会选中文字的问题

1 条评论您还未登录，请先登录后发表或查看评论

登录验证的drag拉到最右边会选择文字解决方法

m0_51557131的博客

08-02

237

这个事件主要是用于禁止选择网页中的文字。bug：在拖拽验证拉到尽头会选中表单的文字。使用onselectstart。

vue/javascript 实现拖动功能是文字总会被选中的问题

wenbintian的博客

06-24

4080

你们是否遇到过按住鼠标左键拖动div块时经常页面上的文字会被选中了，这样造成了不好的开发体验。以下实例能帮你们解决这一问题。 //鼠标按下的事件 onMousedown(event, column) { const resizeProxy = this.$refs.resizeProxy; resizeProxy.style.left = this.d...

解决拖动div时文字选中问题

彭于晏的博客

12-23

976

在可拖动的div上加如下css样式: user-select: none; 就可以了注意:是可以拖动的div哦

element vue 点击一边拖拽改变宽度解决拖动会选中文字的问题

qq_43610925的博客

09-08

1017

【代码】element vue 点击一边拖拽改变宽度解决拖动会选中文字的问题。

html div鼠标选中状态,CSS鼠标移动div时如何避免选中div中的文字

weixin_34897112的博客

05-30

777

很多朋友都遇到过这样的问题，鼠标移动div时老是容易选中div中的文字，操作过快甚至连网页都给咔嚓了，十分蛋疼，小编倒是想知道jb51的小伙伴们在抄袭别人的时候有没有遇到！具体问题移动div的时候速度过快会选中div中的文字，同时会影响div移动的流畅性，导致效率很低解决方法通过CSS样式来实现的禁止用鼠标选择功能：unselectable为IE准备,onselectstart为Chrome、Sa...

鼠标移动div时禁止选中div中的文字的方法

09-25

为了解决这个问题，我们可以采用CSS和JavaScript的方式来禁止div中的文字被选中。首先，我们可以使用CSS样式来禁止文字选中。一种通用的跨浏览器的解决方案是使用`user-select`属性。这个属性允许我们控制元素及其...

js鼠标移动时禁止选中文字

01-19

这是通过CSS样式来实现的禁止用鼠标选择功能： unselectable为IE准备 onselectstart为Chrome、Safari准备 ...<div unselectable=”on” xss=removed xss=removed> 屏蔽选择的样式定义：-moz-user-select属性（只

如何解决div里面的h4标题拖拽，并且实现div里面的文本能够选中和不能选中的问题

qq_38384536的博客

06-28

604

无标题文档 *{ margin:0; top:0} .pop{ height:200px; width:200px; background:red; position:absolute;} h4{ line-height:40px; height:40px; background:#4A1D1D; color:#fff; cursor:move} windo

html 可以拖动的div,多个div实现随意拖拽功能

weixin_42342626的博客

06-10

2509

鼠标事件mousedownmousemovemouseup注意事项:被拖动的div的position属性值一定是absolute。切记不可使用margin-top:10px;而应该使用top:10px;onmousedown事件需要在window.onload时加载。如果被拖动的div上有文字会有自带的文字拖动效果，需要将改div上的所有拖动事件绑定在该div上，可以使用setCapture。代码...

Layout 布局组件快速搭建

赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。

09-13

1413

Layout 布局组件快速搭建： 1. 设置主题样式变量 2. 封装公共布局组件 3. 经典布局 4. 水平布局 5. 响应式布局 6. 搭建 Layout 布局组件 7. 添加 Layout 路由配置 8. 启动项目

HTML、CSS实现树状图

p_s_p的博客

09-09

694

【代码】HTML、CSS实现树状图。

css父容器溢出隐藏子容器溢出滚动

u010234868的专栏

09-13

349

parent 容器设置了固定的宽度和高度，并且通过 overflow: hidden;隐藏了溢出的 .child 容器内容。如果 .child 容器的内容确实超出了其设定的宽度和高度，则会显示滚动条，允许用户滚动查看所有内容。在父容器上设置 overflow: hidden;可以隐藏溢出的内容。如果你想要在子容器溢出时出现滚动条，可以设置 overflow: auto;

【CSS in Depth 2 精译_032】5.4 Grid 网格布局的显示网格与隐式网格（上）

PeacefulWinter的博客

09-17

705

本篇为《CSS in Depth》全新第2版5.4小节的上篇，主要介绍了 Grid 网格布局中的显示网格（explicit grid）与隐式网格（implicit grid）的基本概念，并通过引入一个新的示例页面，详细演示并讲解了基础网格布局的实现过程，为后续隐式网格的用法做铺垫。建议收藏，并跟随本篇上传的同步源代码在本地进行验证。

基于less和scss 循环生成css

k0933的博客

09-14

376

【代码】基于less 循环生成css。

css ＜样式一＞

最新发布

weixin_43689953的博客

09-17

168

盒子模型浮动定位

拖动<div>时容易选中latex文字，影响拖动效果，将latex保存在本地json，json包含latex、<div>坐标，html可以读取json创建<div>，按住鼠标拖动<div>结束后更新本地json

07-13

明白了你的需求，以下是更新后的代码，可以实现拖动 `<div>` 时不会选中 LaTeX 文字，并且可以将 LaTeX 和 `<div>` 的坐标保存在本地 JSON 文件中，HTML 页面可以读取 JSON 文件来创建 `<div>`，在拖动 `<div>` 结束后会更新本地 JSON 文件。首先，我们需要添加一个用于保存 LaTeX 和 `<div>` 坐标的 JSON 文件。在同级目录下创建一个名为 `formulas.json` 的文件，内容如下： ```json { "formulas": [] } ``` 然后，将以下代码添加到 HTML 文件中： ```html <!DOCTYPE html> <html> <head> <title>MathJax Example</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script> <style> .mathjax-formula { font-size: 2.8em; background-color: green; position: absolute; left: 0; top: 0; cursor: move; padding: 5px; border-radius: 5px; color: white; } </style> </head> <body> <div id="mathjax-formulas-container"></div> <script> var formulas = []; function loadFormulas() { fetch("formulas.json") .then(function(response) { return response.json(); }) .then(function(data) { formulas = data.formulas; var mathjaxFormulasContainer = document.getElementById("mathjax-formulas-container"); formulas.forEach(function(formula) { var newFormula = document.createElement("div"); newFormula.className = "mathjax-formula"; newFormula.style.left = formula.position.x + "px"; newFormula.style.top = formula.position.y + "px"; newFormula.innerText = formula.latexCode; mathjaxFormulasContainer.appendChild(newFormula); MathJax.Hub.Queue(["Typeset", MathJax.Hub, newFormula]); }); }); } function saveFormulas() { var data = { formulas: formulas }; fetch("formulas.json", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }); } document.addEventListener("mousedown", function(event) { if (event.button === 0) { var target = event.target; if (target.classList.contains("mathjax-formula")) { offsetX = event.clientX - target.offsetLeft; offsetY = event.clientY - target.offsetTop; selectedFormula = target; document.addEventListener("mousemove", moveFormula); } } }); function moveFormula(event) { if (selectedFormula && event.buttons === 1) { selectedFormula.style.left = event.clientX - offsetX + "px"; selectedFormula.style.top = event.clientY - offsetY + "px"; } else { document.removeEventListener("mousemove", moveFormula); } } document.addEventListener("mouseup", function(event) { if (event.button === 0) { selectedFormula = null; document.removeEventListener("mousemove", moveFormula); saveFormulas(); } }); document.addEventListener("click", function(event) { var mathjaxFormulasContainer = document.getElementById("mathjax-formulas-container"); var target = event.target; if (target === mathjaxFormulasContainer) { var isClickedInsideFormula = false; for (var i = 0; i < mathjaxFormulasContainer.children.length; i++) { var formula = mathjaxFormulasContainer.children[i]; if (event.target === formula || formula.contains(event.target)) { isClickedInsideFormula = true; break; } } if (!isClickedInsideFormula && !selectedFormula) { navigator.clipboard.readText().then(function(text) { if (text) { var latexCode = text.trim(); if (latexCode) { var newFormula = document.createElement("div"); newFormula.className = "mathjax-formula"; newFormula.style.left = event.clientX + "px"; newFormula.style.top = event.clientY + "px"; newFormula.innerText = latexCode; mathjaxFormulasContainer.appendChild(newFormula); formulas.push({ latexCode: latexCode, position: { x: event.clientX, y: event.clientY } }); MathJax.Hub.Queue(["Typeset", MathJax.Hub, newFormula]); saveFormulas(); } } }); } } else if (target.classList.contains("mathjax-formula")) { offsetX = event.clientX - target.offsetLeft; offsetY = event.clientY - target.offsetTop; selectedFormula = target; } }); loadFormulas(); </script> </body> </html> ``` 现在，当你拖动 `<div>` 时不会选中 LaTeX 文字，而是可以平滑地移动 `<div>`。当拖动结束后，会自动更新本地 JSON 文件以保存 LaTeX 和 `<div>` 的坐标。每次加载页面时，会从 JSON 文件中读取数据并创建相应的 `<div>`。感谢你的耐心和理解！