如何使用jQuery在Chrome中拖动SVG元素而不会产生偏移? (Firefox可以) [英] How do I make dragging SVG elements in Chrome with jQuery work without getting offsets? (Firefox is OK)
问题描述
我正在尝试编写一些代码，以允许拖动SVG元素.这对于jQuery，jQuery UI和jQuery SVG来说非常容易，并且在Firefox中可以正常工作，但是在Chrome中，当我拖动SVG元素时，显然会向其坐标添加偏移量.我看不到我做错了什么，也没有发现此区域中的任何已知错误.
I am trying to write some code that allows SVG elements to be dragged around. This is pretty easy with jQuery, jQuery UI and jQuery SVG, and works fine in Firefox, but in Chrome when I drag the SVG element, an offset is apparently added to its coordinates. I can't see anything I'm doing wrong, or discover any known bug in this area.
我构建了一个说明问题的小例子:
I've constructed a small example that illustrates the problem:
<html>
<head>
<title>Foo</title>
<style type="text/css">
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://keith-wood.name/js/jquery.svg.js"></script>
<script type="text/javascript">
$(function() {
var svgOnLoad = function () {
var svg = $('#canvas').svg('get');
$('#piece')
.draggable()
.bind('drag', function (event, ui) {
// Update transform manually, since top/left style props don't work on SVG
var t = event.target.transform.baseVal;
if (t.numberOfItems == 0) {
t.appendItem(svg.root().createSVGTransform());
}
t.getItem(0).setTranslate(ui.position.left, ui.position.top);
});
}
$('#canvas').svg({loadURL: "foo.svg", onLoad: svgOnLoad});
});
</script>
</head>
<body>
<div id="canvas" style="width: 100%; height: 100%;"></div>
</body>
</html>
其中foo.svg只是:
where foo.svg is just:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="450" height="450">
<rect id="piece" width="50" height="50" x="100" y="100" />
</svg>
可以在以下位置找到在线版本:
An online version can be found at:
http://jsfiddle.net/rrthomas/v477X/2/
推荐答案
在jQueryUI中似乎存在一个错误:在非Webkit浏览器中，ui.position对象使用绝对坐标，而在其他浏览器中，它与ui.originalPosition.我不知道哪个是对的.错误是行为不一致.我已在以下位置提交了错误报告:
There seems to be a bug in jQueryUI here: in non-Webkit browsers, the ui.position object uses absolute coordinates, whereas in other browsers it's an offset from ui.originalPosition. I don't know which is correct; the bug is that the behavior is inconsistent. I've filed a bug report at:
http://bugs.jqueryui.com/ticket/8335
因此，解决方法是存储顶级元素的原始坐标，并在Webkit浏览器中设置转换时将坐标设置为(ui.position-ui.originalPosition + origCoords). (Jlange的答案使用了我的最小示例中使用的rect的x和y属性，在这里可以正常工作，但不适用于a可能没有x和y属性的更复杂的对象(例如，如果顶级元素是ag元素)和b)无论如何返回的坐标似乎都不是顶级元素的坐标(恐怕我不知道为什么).)最小代码如下:
The workaround is therefore to store the original coordinates of the top-level element, and set the coordinate to (ui.position - ui.originalPosition + origCoords) when setting the translate transform in Webkit browsers. (Jlange's answer uses the x and y attributes of the rect used in my minimal example, which works fine there, but does not work with more complex objects which a) may not have x and y attributes (e.g. if the top-level element is a g element) and b) where the coordinates returned seem not to be those of the top-level element anyway (I'm afraid I don't know why).) Minimal code follows:
var svgOnLoad = function () {
var svg = $('#canvas').svg('get');
$('#piece')
.draggable()
.on({
dragstart: function (event, ui) {
var tlist = this.transform.baseVal;
if (tlist.numberOfItems == 0) {
tlist.appendItem(svg.root().createSVGTransform());
}
var tm = tlist.getItem(0).matrix;
var pos = {left: tm.e, top: tm.f};
$.data(this, 'originalPosition', pos);
},
drag: function (event, ui) {
// Update transform manually, since top/left style props don't work on SVG
var tlist = this.transform.baseVal;
var CTM = this.getCTM();
var p = svg.root().createSVGPoint();
p.x = ui.position.left + CTM.e;
p.y = ui.position.top + CTM.f;
if ($.browser.webkit) { // Webkit gets SVG-relative coords, not offset from element
var origPos = $.data(this, 'originalPosition');
p.x -= ui.originalPosition.left - origPos.left;
p.y -= ui.originalPosition.top - origPos.top;
}
p = p.matrixTransform(CTM.inverse());
tlist.getItem(0).setTranslate(p.x, p.y);
}});
};
$('#canvas').svg({onLoad: svgOnLoad});
实时版本位于: http://jsfiddle.net/rrthomas/v477X/
这篇关于如何使用jQuery在Chrome中拖动SVG元素而不会产生偏移? (Firefox可以)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
