随机定位jsPlumb的窗口/对话框

Question

有没有办法随机定位使用jsPlumb创建的所有对话框/窗口？

如果我想在这些对话框中有很多项目,但问题是我需要通过给他们一个位置将它们放在屏幕上,但是由于有很多项目,这将是一项繁琐的工作,更不用说这个了项目列表可能会增长/缩小.

查看jsPlumb演示,使用"top"和"left"CSS属性为对话框指定一个位置:

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

有没有办法随机将这些对话框放在屏幕上但它们之间有一定的距离？如果有一种方法可以将对话框放在屏幕上,那么箭头和对话框之间的交叉点就会变得更好.

编辑:

不是最好的解决方案,但是非常好的解决方案:

http://forums.lndb.info/showthread.php?tid=43

https://github.com/lndb/jsPlumb_Liviz.js(此处提供了两个demo)

http://lndb.info/light_novel/diagram/Hidan_no_Aria

Answer 1

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

关注点分离：初始组件定位的任务可以独立于 jsPlump 来看待：

对于我的示例，我选择的算法具有以下要求：

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

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

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

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

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

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

$(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");
});

这是我的 jsbin 的链接

编辑：这是jsfiddle 的链接

组件的初始位置将根据目标框架的宽度而有所不同。