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.

I would go for old fashioned HTML, CSS and jQuery. If you feel more skilled you could look at https://github.com/GoodBoyDigital/pixi.js/ (2D) or http://threejs.org/ (3D) — NinjaFart, Dec 04 '13 at 21:31
@NinjaFart: Could you code up a quick illustration of a couple of divs being connected by a line with arrows on each end of the line with one of the divs being draggable? — markE, Dec 05 '13 at 16:10
This question would have been better addressed to http://softwarerecs.stackexchange.com/ (just publicizing an excellent SE site). You might have gotten a more satisfactory response, rather than a staring point. — Mawg says reinstate Monica, Feb 09 '16 at 09:40
Possible duplicate of [Drawing a line between two divs](https://stackoverflow.com/questions/6278152/drawing-a-line-between-two-divs) — balupton, Nov 05 '18 at 21:04

score 12 · Accepted Answer · answered Dec 05 '13 at 18:05

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.

score 0 · Answer 2 · edited May 23 '17 at 12:08

0

See also this question, which references the excellent JsPlumb.

The toolkit edition includes drag and drop in the community edition and actually has a demo flowchart app in the (very expensive) toolkit edition.

In fact the community edition fully answers your question. Take a look at the perimeter anchors demo.

edited May 23 '17 at 12:08

Community

1
1

answered Feb 09 '16 at 09:45

Mawg says reinstate Monica

38,334
103
306
551

Drag Drop Feature and Arrow Map

2 Answers2