javascript - 随机定位 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:

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

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

• 组件的边距应该可以通过 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");
});

这是一个 link to my jsbin

编辑:这是一个link to jsfiddle

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