我有一个HTML 5页面，我加载一个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>
解决方法
jQuery UI draggable行为不起作用，但是您需要在拖动处理程序中手动更新位置，因为相对CSS定位在SVG内部不起作用。
svg.rect(20,10,100,50,{fill:'#666'});
svg.rect(40,20,{fill:'#999'});
svg.rect(60,30,{fill:'#ccc'});
$('rect')
.draggable()
.bind('mousedown',function(event,ui){
// bring target to front
$(event.target.parentElement).append( event.target );
})
.bind('drag',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);
});
