Question

我打算制作一个流程图工具，如果可行，将使用拖放功能，例如拖动菱形，椭圆形，菱形框等以及可以连接它们的箭头。

任何人都可以建议正确的语言开始，它可以支持定义矩形，箭头和映射对象等功能，以便我知道特定的箭头指向ID为xyz的矩形....

我用jquery，javascript，actionscript标记这个问题...我知道的一些图书馆，如果他们确实支持我正在寻找的东西，我不会通过技术专业知识。

请建议。

Answer 1

$( ".box-handle" ).draggable({ 
    containment: ".container", 
    scroll: false, 
    drag: function () { /* While dragging check for stuff */

        var box = $(this);
        var boxPosition = box.position();
        box.find('.arrow').show();

        if (boxPosition.left >= 90)
        {
            // In the parent div called ".box" find ".box-line"
            box.closest('.box').find('.box-line').css({
                'top':'50px', /* Put top left corner of ".box-line" a the edge of ".static" */
                'left':'110px',
                'width': boxPosition.left - 60, /* Put bottom right corner of ".box-line" a the edge of current dragged box */
                'height': boxPosition.top + 50,
                'border':'none',
                'border-top':'1px solid #bfbfbf',
                'border-right':'1px solid #bfbfbf'
            });
            /* place the arrow*/
            box.find('.arrow').css({
                'top':'-10px',
                'left':'45px'
            });
        }
        else if (boxPosition.left < 90)
        {
            box.closest('.box').find('.box-line').css({
                'top':'110px',
                'left':'50px',
                'width': boxPosition.left,
                'height': boxPosition.top - 60,
                'border':'none',
                'border-left':'1px solid #bfbfbf',
                'border-bottom':'1px solid #bfbfbf'
            });
            box.find('.arrow').css({
                'top':'45px',
                'left':'-10px'
            });
        }
    }
});

我正在使用jQuery UI draggable来移动div。移动div“box-line”时根据我拖动的盒子的位置调整自己的大小。然后，只需在“盒线”的正确边上添加边框即可。

More about draggable。
另请参阅position和/或offset方法。

Answer 2

另请参阅this question，其中引用了优秀的JsPlumb。

工具包版本包括社区版中的拖放功能，实际上在（非常昂贵的）工具包版本中有demo flowchart app。

事实上，社区版完全回答了您的问题。看看perimeter anchors demo。

拖放功能和箭头地图

2 个答案: