文本元素不隨jQuery UI拖動Draggable

我有一個SVG文本元素，我已經應用jQuery ui拖動到。每當我嘗試拖動它時，頂部和左側的CSS屬性就會像您期望的那樣發生變化，但是，元素本身不會移動 - 它只是停留在原來的位置。文本元素不隨jQuery UI拖動Draggable

這違背了我對定位的一切理解。看起來好像只是完全忽略了「頂」和「左」規則。

但是，情節變厚了。

我也將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 
}); 

// ...

來源

2012-11-26 Khior

SVG的text元素沒有與position做任何事情，因爲它遵循的SVG渲染模型，而不是CSS盒模型。有關svg內容支持的屬性列表，請參閱svg specification。

如果在html中內聯，您可以在整個< svg片段上設置position，因爲在這種情況下，它是由CSS佈局的。

來源

2012-11-26 15:40:31

如果忽略position CSS屬性，它不會接受top和left。

如果某個元素的'position'屬性的值爲'static'以外的值爲，則說該元素被定位。

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

來源

2012-11-26 10:30:33

該文本元素的位置'相對' – Khior

請發佈您的代碼然後 –

我已經發布了我的代碼，謝謝=） – Khior

文本元素不隨jQuery UI拖動Draggable

回答

相關問題