文本元素不随 jQuery UI Draggable 移动答案

【问题标题】：text element not moving with jQuery UI Draggable文本元素不随 jQuery UI Draggable 移动
【发布时间】：2012-11-26 23:40:31
【问题描述】：

我在 SVG 中有一个文本元素，我已将 jQuery ui 拖放到该元素上。每当我尝试拖动它时，顶部和左侧的 CSS 属性都会按照您的预期发生变化，但是，元素本身并没有移动 - 它只是保持在原来的位置。

这违背了我对定位的理解。似乎它只是完全忽略了“顶部”和“左侧”规则。

然而，情节变厚了。

我还将 ui-draggable 应用到同一个 svg 中的图像上，它可以正常工作。当我拖动它时，它会按预期移动。

最有趣的是，如果我拖动一些文本，那么它不会移动，但是如果我移动图像，那么文本会突然移动到我试图拖动它的位置！

有人可以提供关于这里发生了什么的任何见解吗？

HTML 如下所示：

<svg id="k" width="220" height="440" preserveAspectRatio="none">
    <image xlink:href="http://u.r.l/media/1353519179-9178.png" width="220" height="440" preserveAspectRatio="none" x="0" y="0" style="position: relative; left: 2px; top: 3px;" class="ui-draggable" transform="rotate(0,112,223) translate(2,3)"></image>
    <text id="svgtxt" x="0" y="0" style="position: relative; left: 101px; top: 118px;" class="ui-draggable" transform="rotate(0,101,118) translate(101,118)">Hello, world!</text>
</svg>

JavaScript 看起来像这样：

// ...

$("#k image").draggable({
    refreshPositions : true
});

// Make the text element draggable
$("#k text").draggable({
    refreshPositions : true
});

// ...

【问题讨论】：

标签： jquery jquery-ui svg jquery-ui-draggable

【解决方案1】：

svg text 元素对 position 没有任何作用，因为它遵循 svg 渲染模型，而不是 CSS 框模型。有关 svg 内容支持的属性列表，请参阅svg specification。

如果它在 html 中内联，您可以在整个 position，因为在这种情况下它是由 CSS 布局的。

【讨论】：

【解决方案2】：

如果你覆盖position css 属性，它将不接受top 和left。

如果一个元素的 'position' 属性有一个 'static' 以外的值。

http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

【讨论】：

文本元素的位置为“相对”
为什么要在初始化可拖动对象之前设置位置、顶部和左侧？？