第一次控制JQuery对象跳转的SVG可拖动元素
基础概念
JQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。
SVG (Scalable Vector Graphics) 是一种基于 XML 的图像格式，用于描述二维矢量图形。SVG 图形可以无损地缩放到任何大小，并且可以在浏览器中直接嵌入和交互。
可拖动元素 指的是用户可以通过鼠标或触摸屏等设备在屏幕上移动的元素。
相关优势
- JQuery: 简化了 DOM 操作，提供了丰富的插件和工具，易于学习和使用。
- SVG: 图形质量高，支持复杂的动画和交互，文件大小相对较小。
- 可拖动元素: 提供了更好的用户体验，增强了用户与页面的互动性。
类型
- 基于 JQuery UI 的拖动功能: JQuery UI 提供了一套完整的拖放 API。
- 自定义拖动功能: 使用 JQuery 和原生 JavaScript 实现拖动效果。
应用场景
- 数据可视化工具（如仪表盘、图表）
- 交互式地图
- 游戏和娱乐应用
- 教育和培训材料
示例代码
以下是一个简单的示例，展示如何使用 JQuery 和 SVG 创建一个可拖动的圆形元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Draggable SVG Circle</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#draggable {
cursor: move;
}
</style>
</head>
<body>
<svg width="500" height="500">
<circle id="draggable" cx="50" cy="50" r="20" fill="blue"></circle>
</svg>
<script>
$(document).ready(function() {
var svg = document.querySelector('svg');
var circle = document.getElementById('draggable');
var startX, startY, initialX, initialY;
circle.addEventListener('mousedown', function(event) {
event.preventDefault();
initialX = event.clientX - parseFloat(circle.getAttribute('cx'));
initialY = event.clientY - parseFloat(circle.getAttribute('cy'));
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
});
function onMouseMove(event) {
circle.setAttribute('cx', event.clientX - initialX);
circle.setAttribute('cy', event.clientY - initialY);
}
function onMouseUp() {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
}
});
</script>
</body>
</html>可能遇到的问题及解决方法
- 元素无法拖动:
- 确保
mousedown事件正确绑定到元素上。 - 检查是否有其他 CSS 属性（如
position: fixed）阻止了元素的移动。
- 确保
- 拖动时页面滚动:
- 在
mousedown事件中添加event.preventDefault()阻止默认行为。
- 在
- 拖动超出 SVG 边界:
- 在
onMouseMove函数中添加边界检查，确保元素不会超出 SVG 的宽度和高度。
- 在
参考链接
通过以上内容，你应该能够理解如何使用 JQuery 控制 SVG 可拖动元素，并解决一些常见问题。
相关·内容
1回答
我必须使用有手柄的DIV来调整SVG的位置和比例。除了SVG在第一次拖动div手柄时跳跃之外，其他一切都如预期的那样工作。只有SVG在跳跃。在这里可以看到，类"selection“是一个用属性("selection=true")控制所选SVG的DIV。.text('x: ' + xPos);
$('#posY').text
浏览 37提问于2020-11-11得票数 1
1回答
我通过JQuery、和插件使几个重叠的对象可拖动和调整大小。当拖动一个对象时，由于有了选项，它会立即被带到最前面的位置。可调整大小的插件没有这个选项，所以当背景中的一个元素被调整大小但没有被拖动时，它会留在后面。谢谢
浏览 7提问于2022-10-12得票数 1
回答已采纳
2回答
当应用浏览器缩放时，我在Safari中遇到了一些基本jQueryUI特性的问题：
jQueryUI对Chrome、F
浏览 5提问于2014-10-08得票数 0
回答已采纳
1回答
正如我们所看到的，使用javascript，div可以是可拖动的、可调整大小的。我知道是否可以使用svg元素组(
浏览 1提问于2014-10-10得票数 0
我有一个HTML5页面，在那里我加载了一个svg圆。当我点击这个圆时，我会在我点击的地方创建另一个小圆。我希望能够拖动第二个圆，但似乎不能使用jquery-ui .draggable()； <!" type="text/javascript" ></script>
<script src="js/jquerys
浏览 4提问于2009-07-10得票数 34
回答已采纳
2回答
如何将拖放设置为允许多次拖动一个元素
我已经制作了类似这样的，但是在将一个项目从红色拖到蓝色之后，元素失去了“可拖放性”，并且我不能再拖动它了。添加revert:true到draggable似乎是可行的，但是我需要删除helper:'clone‘不能同时使用它们
浏览 1提问于2011-02-17得票数 2
回答已采纳
1回答
我想使用红色SVG矩形作为可拖放的div元素的句柄，但是因为SVG元素不是div的子元素，所以不可能。这样做的目的是让句柄(红色重新)触发div的拖动事件，当div被拖动时，代码更新红色SVG矩形的位置。如何使SVG矩形充当div的拖动句柄(因此SVG<em
浏览 5提问于2012-10-12得票数 1
回答已采纳
我有一个显示在表格单元格中的object标记内的SVG文件，我想使用JQuery的Draggable使SVG在表格单元格内可拖动。代码--减去标记中令人困惑的部分，如下所示：<div id="box">
<table align="center" border="1">如果
浏览 0提问于2010-08-08得票数 6
回答已采纳
2回答
我有拖拽jQuery脚本拖拽列表项目的输入。如何在li之间获取文本以设置输入值？现在$this引用了droppable元素。我的代码如下： $(function() {
$( ".draggable" ).draggable
浏览 0提问于2012-03-04得票数 2
回答已采纳
1回答
我想将svg元素拖到HTML元素上。不知道这样做有多聪明。但是，我认为我的方法很脏，但我认为我可以使用d3.behavior.drag()从svg元素开始拖动，在d3的拖动函数上，我将克隆一个副本(请认为它只是一个圆圈对象)，并让jquery处理拖动事件。问题是，我不知道如何在新创建的jquery元素上触发拖动
浏览 2提问于2014-02-18得票数 1
回答已采纳
1回答
通过引用https://jqueryui.com/draggable/，我能够在父元素(例如div)中实现拖放功能。然而，我需要的是让这个可拖动的特性在多边形元素(如SVG多边形)中工作。我一直在搜索网络，但是有一些例子说明了如何使svg多边形可拖动，而不是“如何在多边形父对象(div)内包含拖放功能”。 任何想法/指针都会很有帮助。 谢谢。
浏览 33提问于2019-03-07得票数 0
1回答
我正在尝试用d3和SVG构建一个可拖动的对象。"target“对象是一个SVG G元素，它包含一个"rect”作为背景，SVG元素作为带有单击事件的子元素(如网格)。我想丢弃距开始拖动点的距离小于11的事件；因为"target“对象有子对象，当拖动</em
浏览 4提问于2017-03-17得票数 1
回答已采纳
我在VML (我用它作为svg的后备)方面遇到了问题此时发生的情况是，元素卡在其容器的左上角，不能再拖动。奇怪的是，当我在JavaScript控制台中请求可拖动元素</
浏览 0提问于2012-02-24得票数 2
回答已采纳
1回答
我在svg和png中有不同的图像，我只想通过它们的图像本身来拖动这些数字。因此，我想要能够“忽略”或禁用拖放的区域是不可见的。我尝试过不同的方法，比如将图像绘制到<canvas>元素上，并尝试获取大于零的像素，但没有成功。我还能做什么？document.getElementById("canvas"); va
浏览 8提问于2022-07-16得票数 2
1回答
我不想要可拖动的排序元素或任何花哨的东西，只想要一个可拖动的元素，就像一个普通的jQuery div可拖动对象：通过Angular做这件事的正确方法是什么我还在使用jQueryUI吗，或者AngularUI中有什么我可以使用的吗？我
浏览 1提问于2013-01-30得票数 24
回答已采纳
1回答
我正在尝试使用jquery ui实现拖放功能。我有一个位置为“相对”的容器，里面有位置为“绝对”的可拖动元素。我想要的是，限制容器内的可拖动元素，以及将元素滚动到容器之外的能力。所以我初始化了draggables，如下所示： containment:'parent',
浏览 0提问于2017-02-23得票数 0
2回答
我面临着第一次执行事件的拖放问题。这个问题与我第一次将其拖放到另一个位置时图像的位置有关。这里是js小提琴链接。请增加jsfiddle中输出窗口的高度和宽度。
Jsfiddle图像链接。
浏览 0提问于2018-08-31得票数 4
我知道我可以使用宽度或大小函数来获得它，但是我正在尝试在创建一个可拖放的对象的时候就这样做。square = draw.rect(size, size).x(x).y(y).draggable(function(x, y){ yend = 0;
xend =
浏览 5提问于2014-06-26得票数 0
回答已采纳
1回答
我在一些div中使用JQuery可排序。下面是一个显示问题的小提琴：
我如何解决它，使元素始终保持居中？
浏览 2提问于2013-07-30得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
