Drag Drop Feature and Arrow Map

Question

I intend to make a flowchart tool which if feasible will use a drag and drop feature, such as drag a rhombus, oval, diamond box etc. and the arrows that can connect them.

Can anyone please suggest proper language to begin which can support features like defining objects for rectangle, arrows, and there mapping so that i know a particular arrow is pointing to a rectangle with ID xyz....

I am tagging this question with jquery, javascript,actionscript...some libraries that i know by name not by technical expertise if in case they do support what i am looking for.

Please suggest.

Answer 1

This is meant as a starting point: 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'
            });
        }
    }
});

I'm using jQuery UI draggable for moving div's around. While moving the div "box-line" resizes itself according to the position of the box I'm dragging. Then it's just a matter of adding borders to the correct side of "box-line".

• More about draggable.
• Also have a look at position and/or offset methods.