jsPlumb drag options example

by Aras Balali Moghaddam

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://jsplumb.org/js/1.3.3/jquery.jsPlumb-1.3.3-all-min.js"></script>
<div id="first" class="myTest">First</div>

<div id="second" class="myTest">Second</div>

<div id="target"></div>

CSS

#first,#second {background: #000; width: 60px;height: 30px; padding:  10px;color:#FFF; margin: 10px; position: absolute;}
    
#target { border:  1px solid red; width: 300px; height: 200px; margin-top: 100px;}

JavaScript

jsPlumb.ready(function() {
    $("#target").droppable({
        scope: "foo"
    });

    var exampleDropOptions = {
        tolerance: 'touch',
        hoverClass: 'dropHover',
        activeClass: 'dragActive'
    };

    var color2 = "#316b31";
    var exampleEndpoint = {
        paintStyle: {
            fillStyle: color2
        },
        isSource: true,
        connectorStyle: {
            strokeStyle: color2,
            lineWidth: 8
        },
        connector: ["Bezier",
        {
            curviness: 63}],
        maxConnections: 3,
        isTarget: true,
        dropOptions: exampleDropOptions,
        connectorOverlays: [["Arrow",
        {
            location: 0.45}]],
        hoverPaintStyle: {
            strokeStyle: "red"
        }
    };
    jsPlumb.addEndpoint("first", {
        anchor: [0.75, 0, 0, -1]
    }, exampleEndpoint);
    jsPlumb.addEndpoint("second", {
        anchor: [0.75, 0, 0, -1]
    }, exampleEndpoint);
    var revTest = false;
    var options = {
        revert: function(socketObj) {
            if (socketObj === false) {
                revTest = true;
                return true;
            } else {
                revTest = false;
                return false;
            }
        },
        scope: "foo",
        stop: function(e, ui) {
            if (revTest === true) {
                alert("#" + this.id + " Out of #target");
                jsPlumb.repaint(this.id);
            }
        }
    };
    jsPlumb.draggable($(".myTest"), options);
});