可使用JQuery和Jquery-svg拖拽
我有一个HTML5页面，在那里我加载了一个svg圆。当我点击这个圆时，我会在我点击的地方创建另一个小圆。我希望能够拖动第二个圆，但似乎不能使用jquery-ui .draggable()；
我可以通过访问圆的cx和cy属性来移动圆，因此必须有一种方法来拖动它。
<!DOCTYPE HTML>
<html >
<head>
<title></title>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/layout.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery.js" type="text/javascript" ></script>
<script src="js/jquerysvg/jquery.svg.js" type="text/javascript" ></script>
<script src="js/jquery-ui.js" type="text/javascript" ></script>
<script type="text/javascript" >
jQuery(document).ready(function(){
$('#target').svg({onLoad: drawInitial});
$('circle').click(function(e){
drawShape(e);
var shape = this.id;
});
$('.drag').mousedown(function(e){
var shape = this.id;
this.setAttribute("cx", e.pageX);
this.setAttribute("cy", e.pageY);
});
})
function drawInitial(svg) {
svg.add($('#svginline'));
}
function drawShape(e) {
var svg = $("#target").svg('get');
$('#result').text(e.clientX + ": " + e.pageX);
var dragme = svg.circle(e.clientX, e.clientY, 5, {fill: 'green', stroke: 'red', 'stroke-width': 3, class_: 'drag'});
//$(dragme).draggable();
}
</script>
</head>
<body>
<div id="target" ></div>
<svg:svg id="svginline">
<svg:circle id="circ11" class="area" cx="75" cy="75" r="50" stroke="black" stroke-width="2" fill="red"/>
</svg:svg>
<div id="result" >ffff</div>
</body>
</html>回答 5
Stack Overflow用户
发布于 2011-05-29 17:12:11
SVG可拖动行为确实有效，但您需要在拖动处理程序中手动更新位置，因为相对jQuery定位在SVG中不起作用。
svg.rect(20,10,100,50, 10, 10, {fill:'#666'});
svg.rect(40,20,100,50, 10, 10, {fill:'#999'});
svg.rect(60,30,100,50, 10, 10, {fill:'#ccc'});
$('rect')
.draggable()
.bind('mousedown', function(event, ui){
// bring target to front
$(event.target.parentElement).append( event.target );
})
.bind('drag', function(event, ui){
// update coordinates manually, since top/left style props don't work on SVG
event.target.setAttribute('x', ui.position.left);
event.target.setAttribute('y', ui.position.top);
});Stack Overflow用户
发布于 2010-09-30 13:34:44
我正在修改的解决方案涉及(将其与您的情况绑定在一起)创建一个新的div和svg，将其定位在原始形状之上，作为目标svg对象的句柄。使手柄div可拖动，并在外部存储开始的顶部/左侧偏移(考虑隐藏的div)。一旦触发了可拖动div的"stop“事件，计算出顶部和左侧的变化程度(stopX-startX=changeX)，并将其应用于原始形状坐标。然后.remove()你的临时形状。
Stack Overflow用户
发布于 2013-06-22 02:07:40
This link很好地描述了如何在一般情况下解决问题(即，不需要JQuery)，这绝对是我见过的最好的解决方案。但是，我想继续使用JQuery优秀的可拖动API。
我最近花了几天的时间来研究这个问题。上面被接受的答案是我首先尝试的，但我不能让它在Firefox中正常工作。有不同的something about how browsers handle SVG坐标。
我想出了一个解决方案，在Chrome和火狐中都能很好地工作，并让我继续使用JQuery UI。我没有在任何地方测试过它。这绝对是黑客干的。
您可以看到我在fiddle here中所做的快速模拟。关键思想是使用代理div，您可以将其精确地悬停在要拖动的svg元素上。然后，在拖动代理div时更改svg元素的x和y坐标。如下所示：
$('#proxy').on('drag', function(e)
{
t = $('#background');
prox = $('#proxy');
t.attr('x', t.attr('x')*1
+ prox.css('left').slice(0,-2)*1
- prox.data('position').left)
.attr('y', t.attr('y')*1
+ prox.css('top').slice(0,-2)*1
- prox.data('position').top);
prox.data('position',{top : prox.css('top').slice(0,-2)*1,
left: prox.css('left').slice(0,-2)*1}
);
});在我的例子中，我想要拖动的SVG元素总是会填满屏幕上的某个正方形，所以很容易将代理div放在目标上。在其他情况下，这可能要困难得多。使用“控制”选项来确保你不会将背景拖到frame...it之外也不是太难，只是需要一些仔细的数学运算，并且你必须在每次拖动之间重新设置控制。
要使其适用于更多的SVG元素，您可以使用转换，而不是x和y坐标。
https://stackoverflow.com/questions/1108480
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号