我必须制作可拖动的svg元素(视口)。
$('.zoom_panel').mousedown(function(e) {
if (!drag.state && e.which == 1) {
drag.elem = $('#graph_stage svg .viewport');
drag.state = true;
currentX = $(drag.elem).offset().left;
currentY = $(drag.elem).offset().top;
}
return false;
});
$('.zoom_panel').mousemove(function(e) {
if (drag.state) {
var attrs = $(drag.elem).attr('transform').split(' ')[1];
dx = e.offsetX - $(drag.elem).offset().left;
dy = e.pageY - $(drag.elem).offset().top;
newMatrix = 'translate('+( dx )+','+( dy )+') '+attrs;
$(drag.elem).attr('transform',newMatrix);
}
});
svg没有动摇它的眨眼。
jsfiddle
答案 0 :(得分:1)
试试这个jsfiddle
尝试使用相对位置设置dx。
dx = e.offsetX - currentX + currentdx;
dy = e.offsetY - currentY + currentdy;