javascript - 如何在 Javascript 或 JqueryUI 中将 <line> 拖到 <rect> 内？

Question

我在 SVG 中有 rect 和 line 元素。我想使用 jQueryUI 在 rect 内水平拖动一条线。我正在尝试关注 this示例。

这是我的 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，但后来到它的可拖动，我需要它被禁用。并且线被拖到右 Angular 。我将矩形的 x 作为 newpos 传递。 还有一种方法可以使行保持默认选中状态吗？

Answer 1

您可以简单地更新 x1 and x2您在 drag event 上的行的属性:

$("#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>