拖放功能和箭头图

Posted 2023-02-18

【中文标题】拖放功能和箭头图

【英文标题】：Drag Drop Feature and Arrow Map

【发布时间】：2013-12-21 05:37:49

【问题描述】：

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

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

我用 jquery、javascript、actionscript 来标记这个问题...如果它们确实支持我正在寻找的东西，我会通过名称而不是技术专长知道一些库。

请提出建议。

【问题讨论】：

我会选择老式的 html、CSS 和 jQuery。如果您觉得更熟练，可以查看 github.com/GoodBoyDigital/pixi.js (2D) 或 threejs.org (3D)

@NinjaFart：您能否编写一个简短的说明，说明几个 div 由一条线连接，该线的每一端都有箭头，其中一个 div 是可拖动的？

这个问题最好发给softwarerecs.stackexchange.com（只是宣传一个优秀的SE网站）。您可能会得到更令人满意的回应，而不是凝视。

Drawing a line between two divs的可能重复

【参考方案1】：

这是一个起点：http://jsfiddle.net/Qgt9V/2/

$( ".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 来移动 div。在移动 div 时，“box-line”会根据我拖动的框的位置调整自身的大小。然后只需在“box-line”的正确一侧添加边框即可。

More about draggable。 还可以查看 position 和/或 offset 方法。

【参考方案2】：

另见this question，它引用了优秀的JsPlumb。

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

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