Search code examples
javascriptjsplumb

jsplumb: How to create new element by dragging connector

I have been customizing the jsplumb flowchart example. Currently, I can drag and create connectors between elements but I would like to now drag an element to a blank part of the screen (i.e. not an element) and catch that event. Does anyone know which one that would be?

Solution

  • Instead of using jsPlumb.draggable, use jQuery draggable

    $(".element").draggable({
                helper: 'clone',
                // appendTo: 'body',
                start: function(event, ui) {}, // console.log(event);console.log(ui)},
                stop: function(event, ui) {}, // console.log(event);//console.log(ui)},
                revert: 'invalid',
                cursor:'move',
                opacity: 0.5,
            });

    API Docs - http://api.jqueryui.com/draggable/

    start & stop are the events fired when the drag starts and stops respectively.