Javascript 随机定位jsPlumb'；s窗口/对话框

是否有一种方法可以随机定位使用jsPlumb创建的所有对话框/窗口

如果我想在这些对话框中显示很多项，但问题是我需要通过给它们一个位置将它们放在屏幕上，但是由于有很多项，这将是一项乏味的工作，更不用说这个项列表可能会增加/减少

查看JSplump演示，使用“top”和“left”CSS属性为对话框指定了特定位置：

#window3 { top:2em; left:2em; }
#window4 { top:2em; left:32em; }

有没有办法将这些对话框随机放置在屏幕上，但它们之间有一定的距离？如果有一种方法将对话框放在屏幕上，这样箭头和对话框之间的交叉就最小，那就更好了

编辑：

这不是最好的解决方案，但很不错：

（此处提供了两个演示）

---

如果我正确理解了这个问题，那么您关心的是组件的初始位置，并且您正在搜索通用解决方案（与组件的大小和数量无关）

关注点的分离： 初始组件定位任务可以独立于JSP来考虑：

在我的示例中，我选择了一种具有以下要求的算法：

• 在屏幕上均匀放置组件，以视口宽度作为水平包容

• 组件的边距应通过CSS进行调整

• 组件必须保持可拖动，以保持jsPlumb功能

在我的解决方案中，我利用了这样一个事实：通过相对定位，可以很容易地将组件分布在网格中。给包含DIV一个初始类“initial”，我为组件定义以下CSS：

#demo.initial .component.window {
    position:relative;
    float:left;
    margin:60px;
}

DOM组件渲染为网格后，我将其CSS位置从相对更改为绝对（通过删除容器的“初始”类并在其样式属性中应用组件的偏移量）

这里有一个

编辑：这里有一个

---

组件的初始位置将因目标帧的宽度而异。

第一个解决方案是使用此库：

jsPlumb库的组合，用于将元素与 用于这些元素的定位

换句话说：对UI（连接div）使用jsPlumb，以及 用于定位这些元素（div）的Liviz.js

我发现的另一个解决方案是使用“dagre-Directed graph rendering”javascript库：

Dagre是一个JavaScript库，可以轻松地进行定向布局 客户端的图形

该图书馆的重点是：

完全客户端计算布局。有很多很棒的，功能丰富的 如果客户端布局不是可用的，则可以选择graphviz 对你的要求

速度。Dagre必须能够快速绘制中等大小的图形， 潜在的代价是无法采用更优的或 精确算法

使不可知论的。Dagre只需要非常基本的信息即可发布 输出图形，例如节点的维度。您可以自由渲染 使用您喜欢的任何技术绘制图形。我们在一些应用程序中使用D3 如果您计划使用CSS和 SVG

---

在Javascript中，随机定位项目是很平常的，但就目前情况而言，您的问题非常模糊，因为还没有确定要使用哪种类型的算法来定位项目。有很多方法可以做到这一点。在我看来，最好从描述一个显示项目的算法开始，然后从那里开始。另外，如果你发布了一个JSFIDLE，你更可能得到一个响应。你能推荐一个算法来完成我上面提到的吗？我想在屏幕上分布多个对话框（div）（不同的顶部和左侧值），它们之间有一定的距离，并且div和箭头之间的交互最小。我会尽快添加一个JSFIDLE。请使用这里的演示：我认为演示应该足够了。我想我要求的重点已经被理解了。。。以某种方式“自动”布局jsplumb的div，以便div和箭头之间的交叉最小。。。我到处都找遍了，找不到任何能帮助我实现这一目标的东西。是一个jQuery插件，它将获取一组元素，并使用绝对定位（如jsPlumb所需）以类似于浮点的可配置方式进行布局。不过，我相信它提供了一个符合您需求的可证明的解决方案。如果是我，我会否决您使用流行语。因为你所说的是琐碎的，而且根本不适合。@dualed，作者问道：“有没有办法把这些对话框随机地放在屏幕上，但它们之间有一定的距离？”。建议的方法给出了一个独立于组件数量的答案。你能与最多10个具有端点/源点的div共享一个Js Fiddle吗？@abcdefghi，我已经将演示和修改移到了jsfiddle。请参阅我编辑的答案中的JSFIDLE链接。@dualed强烈不同意“使用流行语”值得投反对票，或者该问题本质上无关紧要（OP无法做到），或者该解决方案“无论如何都不适合”。正如我理解的那样，小提琴中演示的代码工作得非常完美。

$(document).ready(function() {
    $(".component.window").each(function(i) {
        var left = $(this).offset().left;
        var top = $(this).offset().top;
        $(this).css({
            left: left,
            top: top
        });
    });
    $("#demo.initial").removeClass("initial");
});