问

拖放功能和箭头地图

假面的告白1993_931 发布于 2023-02-12 19:53

jquery

java

actionscrip

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

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

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

请建议.

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 draggable来移动div.移动div"box-line"时根据我拖动的盒子的位置调整自己的大小.然后,只需在"盒线"的正确边上添加边框即可.

更多关于draggable.

还要看一下位置和/或偏移方法.

2023-02-12 19:56 回答

粉红的少女

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签