在 jsPlumb 中使用“位置：相对”？答案

【问题标题】：use of 'postion: relative' with jsPlumb?在 jsPlumb 中使用“位置：相对”？
【发布时间】：2013-04-15 19:23:46
【问题描述】：

首先，我正在尝试（新手）jsPlumb。我似乎无法在 jsPlumb 文档中或通过谷歌搜索找到以下内容，现在我正在兜圈子，所以必须是时候继续问了：基本上，我可以相对定位元素并让它们与 jsPlumb 一起使用吗？

例如以下工作完美

<!DOCTYPE html><html>
<head>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
   <script type='text/javascript' src="PATH/TO/jquery.jsPlumb-1.3.16-all-min.js"></script>
</head>
<body>
   <div style='position: absolute; background-color: yellow; width: 100px; height: 100px' id='box1'>Box 1</div>
   <div style='position: absolute; background-color: pink; width: 100px; height: 100px' id='box2'>Box 2</div>
</body>

<script type='text/javascript'>
    jQuery(document).ready( function(){

       jsPlumb.draggable("box1");
       jsPlumb.draggable("box2");

       var e0 = jsPlumb.addEndpoint("box1", {
           endpoint:"Dot",
           anchor:"AutoDefault"
       });

       var e1 = jsPlumb.addEndpoint("box2", {
           endpoint:"Dot",
           anchor:"AutoDefault"
       });

       jsPlumb.connect({ source:e0, target:e1 });
})
</script>

</html>

但是，如果我将框的 `position: absolute` 更改为 `position: relative`，则行为会变得不稳定（尤其是在将框拖到当前视图之外时）。 jsPlumb 是否只需要绝对定位的元素？如果我希望我的元素初始化相对定位会发生什么？如果有人问过这个（某种）问题，或者它在某个地方的文档中，我们深表歉意 - 但我找不到它。

【问题讨论】：

标签： jquery positioning jsplumb

【解决方案1】：

您的 div 必须是绝对定位的。具有相对定位的 Div 不适用于拖动 Check this。

【讨论】：

感谢您的信息..但是如果在拖动 div 时将位置设置为相对，则连接线的位置不正确。您可以在上面的小提琴中尝试一下。其次，你的回答没有意义。您可以使用的每个答案都有一个添加评论链接。谢谢