Как перетащить <line>внутрь <rect>в Javascript или JqueryUI?

Question

У меня есть элементы rect и line внутри SVG.Я хочу перетащить линию горизонтально внутри rect, используя jQueryUI.Я пытаюсь следовать этому примеру.

Это мой 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>

код

 $(function() {
   $( "#draggable" ).draggable({ containment: "#containment-wrapper", 
   scroll: false });
 });

Но он не работает должным образомлиния не перемещается вообще.

Обновление

Я пытался использовать динамический элемент строки, он не работает должным образом.

SVG:

<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);
 }
 });

Я отключаю g и rect, но затем его перетаскиваем, мне нужно, чтобы он был отключен.И линия перетаскивается в правый угол. Я передал x прямоугольника как newpos.Также есть ли способ сохранить линию, выбранную по умолчанию?

Answer 1

Вы можете просто обновить x1 и x2 атрибуты вашей линии в событие перетаскивания :

$("#draggable1").draggable({
    drag: function(event, ui) {
        var newPos = (ui.position.left > 300) ? 300 : ui.position.left;
        event.target.setAttributeNS(null, "x1", newPos);
        event.target.setAttributeNS(null, "x2", newPos);
    }
});

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<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="draggable1" y1="0" x2="150" y2="100"
          style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>