如何拖动a<；生产线>；内部<；rect>；用Javascript还是JqueryUI？

SVG中有

rect

和

line

元素。我想使用jQueryUI在

rect

中水平拖动一条线。我试着效仿

这是我的SVG

 <svg width="400" height="110" >
   <rect width="300" height="100" style="fill:none;stroke-width:3;stroke:rgb(0,0,0)" id="containment-wrapper"/>
   <line x1="150" id="draggable" y1="0" x2="150" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
 </svg>

但它没有像预期的那样工作，线路根本没有移动

更新

我尝试使用DynamicLine元素，但它没有按预期工作

SVG：

我禁用了g和rect，但是为了它的可拖动性，我需要禁用它。这条线被拖到了右角。我把rect的x作为newpos传递。 还有一种方法可以使行保持默认选中状态吗？

您只需在以下位置更新行的属性：

$（“#可拖动1”）.draggable({
拖动：函数（事件、ui）{
var newPos=（ui.position.left>300）？300:ui.position.left；
event.target.setAttributeNS（null，“x1”，newPos）；
event.target.setAttributeNS（null，“x2”，newPos）；
}
});
谢谢，但动态创建该行时，它无法正常工作。请检查我是否有更新的问题。
 $(function() {
   $( "#draggable" ).draggable({ containment: "#containment-wrapper", 
   scroll: false });
 });

<g id="grp">
<rect x="488.5" y="380.3" 
   width="76.7" height="38.5" id="rct1" style="pointer- 
    events:inherit">
</rect>
<text transform="matrix(1 0 0 1 515.272 
   402.9645)" id="txt1" style="pointer- 
   events:inherit">Check</text>
</g>

Bbox = document.getElementById(rct1).getBBox();

line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttributeNS(null, "id", "line_1");
line.setAttributeNS(null, "x1", Bbox.x + Bbox.width / 2);
line.setAttributeNS(null, "x2", Bbox.x + Bbox.width / 2);
line.setAttributeNS(null, "y1", Bbox.y);
line.setAttributeNS(null, "y2", Bbox.y2);
line.setAttributeNS(null, "fill", "none");
line.setAttributeNS(null, "fill-opacity", "1");
line.setAttributeNS(null, "stroke", "red");
line.setAttributeNS(null, "stroke-width", "2");
line.setAttributeNS(null, "stroke-opacity", "1");
line.setAttributeNS(null, "style", "pointer-events: inherit");

document.getElementById(grp).appendChild(line);
$("#grp").draggable("disable");
$("#rct1").draggable("disable");

$("#line_1").draggable({
stack: "#line_1"
drag: function (event, ui) {
var newPos = (ui.position.left > Bbox.x) ? Bbox.x + 1 : ui.position.left;
event.target.setAttributeNS(null, "x1", newPos);
event.target.setAttributeNS(null, "x2", newPos);
 }
 });