上述html拖动<div>结束后会创建新的<div>,我需要选中的<div>拖动结束以后不会创建新的<div>

时间: 2023-08-14 21:03:32 浏览: 105

利用JQuery+EasyDrag 实现弹出可拖动的Div，同时向Div传值，然后返回Div选中的值

标题中的“利用JQuery+EasyDrag 实现弹出可拖动的Div，同时向Div传值，然后返回Div选中的值”是指在一个Web应用中，使用JQuery库结合EasyDrag插件来创建一个可拖动的弹出Div，并且能够传递数据给这个Div，以及从Div中获取用户的选择。这个过程涉及到前端交互设计、JavaScript编程和JQuery插件的使用。 JQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互。JQuery的易用性和丰富的插件生态使得开发者能够快速构建复杂的Web界面，而无需编写大量的原生JavaScript代码。 EasyDrag是JQuery的一个插件，专门用于实现元素的拖放功能。在这个场景中，EasyDrag被用来使弹出的Div具有拖动效果，这样用户可以方便地移动Div的位置。实现拖动效果的代码如下： ```javascript $(document).ready(function() { $("#divPanel").easydrag(); }); ``` 这里的`$("#divPanel")`选取了ID为`divPanel`的元素，然后调用`easydrag()`方法使其具有拖放功能。如果只想通过特定区域（如标题）来拖动整个Div，可以设置拖动处理区域，如下： ```javascript $(document).ready(function() { $("#divPanel").easydrag(); $("#divPanel").setHandler("divTitle"); }); ``` 这将只允许用户通过ID为`divTitle`的子元素来拖动`divPanel`。描述中提到的需求是一个典型的前端交互功能：从列表中选择要导出到Word的列。实现这个功能时，首先在后台生成一个包含所有列信息的字符串，如`1-Name--2-Age--3-Sex--4-Salary`，并存储在隐藏字段中。然后，JavaScript读取这个字符串，动态生成HTML结构，创建一组复选框供用户选择。当用户做出选择后，将选中的列名重新组合成新的字符串，例如`1-Name--2-Age--3-Sex`，并存储在另一个隐藏字段中，供后台读取后进行Word导出。 HTML部分可能如下： ```html <div id="divPanel" style="..."> <div id="divTitle" style="...">Title</div> <div class="pop-box-body">  <input type="checkbox" value="1-Name" />Name <input type="checkbox" value="2-Age" />Age <input type="checkbox" value="3-Sex" />Sex  </div> </div> ``` 用户选择完成后，可以通过JQuery获取选中的值，并组合成需要的字符串。例如： ```javascript var selectedColumns = []; $("input[type='checkbox']:checked").each(function() { selectedColumns.push($(this).val()); }); var combinedString = selectedColumns.join("--"); // 将combinedString存入隐藏字段 ``` 这样，通过JQuery和EasyDrag，我们就实现了弹出Div的拖动和数据交互功能。这个示例展示了如何高效地利用JQuery及其插件来提高开发效率，同时也体现了前端技术在提升用户体验方面的强大能力。

如果你希望拖动已经存在的 `<div>` 元素时不创建新的元素，你可以在拖动结束后更新选中元素的位置，而不是创建新的元素。下面是更新后的代码： ```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 = []; var selectedFormula = null; var offsetX = 0; var offsetY = 0; document.addEventListener("mousedown", function(event) { var target = event.target; if (target.classList.contains("mathjax-formula")) { selectedFormula = target; offsetX = event.clientX - selectedFormula.offsetLeft; offsetY = event.clientY - selectedFormula.offsetTop; } }); document.addEventListener("mousemove", function(event) { if (selectedFormula) { selectedFormula.style.left = event.clientX - offsetX + "px"; selectedFormula.style.top = event.clientY - offsetY + "px"; } }); document.addEventListener("mouseup", function(event) { selectedFormula = null; }); document.addEventListener("click", function(event) { var mathjaxFormulasContainer = document.getElementById("mathjax-formulas-container"); navigator.clipboard.readText().then(function(text) { if (text) { var latexCode = text.trim(); if (latexCode && !selectedFormula) { 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]); } } }); }); </script> </body> </html> ``` 现在，当你拖动一个已经存在的 `<div>` 元素时，不会创建新的元素。只有当你在页面上点击空白区域时，才会根据剪贴板中的 LaTeX 代码创建新的公式。请注意，这里我添加了一个条件 `!selectedFormula` 来确保只有在没有选中元素时才创建新的公式。

阅读全文

上述html拖动<div>结束后会创建新的<div>,我需要选中的<div>拖动结束以后不会创建新的<div>

相关推荐

JavaScript实现：DIV拖动与动态添加新层技术解析

实现可拖动及调整大小的HTML DIV层技术

我希望点击空白区域创建；判断区域，当按住移动鼠标时可以拖动，放开鼠标后不允许查看剪贴板

现在点击空白区域又不能创建了，需要判断点击画布的位置是否存在，如果没有就可以创建新的，否则选中当前区域下的,同时按下和移动鼠标进行移动，注意放开鼠后不会产生新的

拖动解决了，可视放开鼠标后创建出了多余的

当鼠标左键点击区域后可以移动鼠标拖动，放开鼠标左键停止移动

拖动一个已经存在的 元素时，还是会创建新的元素，并且拖动中latex的渲染公式不能拖动，只能托动边缘

json存储latex代码,横坐标，纵坐标；网页读取json在网页通过json读取横坐标，纵坐标位置渲染latex，渲染的latex放在中，可以选中，按下鼠标移动鼠标可以拖动,为了拖动顺滑，渲染出来的latex代码不能选中

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>直播数据</title> <style> .right{ float: right; height: 40px; width: 20px; } .left{ margin-right: 25px; width: auto; height: 40px; } body { user-select: none; overflow: hidden; } </style> </head> <body> 添加数据源 </body> </html>

点击页面时先判断是原有元素区域还是空白区域，点击矩形区域则执行的是拖动事件，点击空白区域则是添加

添加一个判断，当点击区域在原有的范围时，移动鼠标可以拖动当前范围内的位置，写成完整的html

需要同时按住鼠标并移动鼠标才能拖动

将添加的代码写进html，还有鼠标放开不清除选中

可是现在点击空白区域不能创建

鼠标放开停止移动解决了，但是现在出现了新问题，鼠标放开时会创建多余的

最新推荐

python入门-30.寻找列表中只出现一次的数字-寻找单身狗.py

布尔教育linux优化笔记

火炬连体网络在MNIST的2D嵌入实现示例

管理建模和仿真的文件

L2正则化的终极指南：从入门到精通，揭秘机器学习中的性能优化技巧

如何构建一个符合GB/T19716和ISO/IEC13335标准的信息安全事件管理框架，并确保业务连续性规划的有效性？

Angular插件增强Application Insights JavaScript SDK功能

"互动学习：行动中的多样性与论文攻读经历"

L1正则化模型诊断指南：如何检查模型假设与识别异常值（诊断流程+案例研究）

如何构建一个符合GB/T19716和ISO/IEC13335标准的信息安全事件管理框架，并确保业务连续性规划的有效性？

拖动一个已经存在的元素时，还是会创建新的元素，并且拖动中latex的渲染公式不能拖动，只能托动边缘