JSFiddle - React, Tailwind, and code Playground

by Jim Crozier

HTML

<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="http://jsplumb.org/js/1.3.4/jquery.jsPlumb-1.3.4-all.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<div id="droppable2-inner1" class="dragcodes" name="dataObj" style="background-color: white; border: 3px solid #346789;color: black;font-family: helvetica;font-size: 0.8em;height: 12em;opacity: 0.8;padding: 0.5em;position: absolute;width: 14em;text-align:center;width: 100px;height: 100px;z-index: 3;border: solid 1px; left: 150; top:500;"><b>jsPlumb object:</b> <br><br> does not read position on drag to console</div>
    <br> <br> <br> <br> <br> <br> <br>
<div id="dragcodes2" class="dragcodes2" name="dataObj" style="background-color: white; border: 3px solid #346789;color: black;font-family: helvetica;font-size: 0.8em;height: 12em;opacity: 0.8;padding: 0.5em;position: absolute;width: 14em;text-align:center;width: 100px;height: 100px;z-index: 3;border: solid 1px; left: 250; top:500;"><b>non-jsPlumb object</b><br><br> reads position on drag to console</div>

JavaScript

$(document).ready(function () {

    //$(".window").draggable();

    // var a = $("#a");
    //var b = $("#b");

    //Setting up drop options
    var targetDropOptions = {
        tolerance: 'touch',
        hoverClass: 'dropHover',
        activeClass: 'dragActive'
    };

    //Setting up a Target endPoint
    var targetColor = "#4F94CD";
    var targetEndpoint = {
        endpoint: ["Dot", {
            radius: 8
        }],
        paintStyle: {
            fillStyle: targetColor
        },
        //isSource:true,
        scope: "green dot",
        connectorStyle: {
            strokeStyle: targetColor,
            lineWidth: 8
        },
        connector: ["Bezier", {
            curviness: 63
        }],
        maxConnections: 3,
        isTarget: true,
        dropOptions: targetDropOptions
    };

    //Setting up a Source endPoint
    var sourceColor = "#A6A6A6";
    var sourceEndpoint = {
        endpoint: ["Dot", {
            radius: 8
        }],
        paintStyle: {
            fillStyle: sourceColor
        },
        isSource: true,
        scope: "green dot",
        connectorStyle: {
            strokeStyle: sourceColor,
            lineWidth: 8
        },
        connector: ["Bezier", {
            curviness: 63
        }],
        maxConnections: 3,
        //isTarget:true,
        //dropOptions : targetDropOptions
    };


    //Set up endpoints on the divs
    jsPlumb.addEndpoint($(".dragcodes"), {
        anchor: "TopCenter"
    }, targetEndpoint);
    jsPlumb.addEndpoint($(".dragcodes"), {
        anchor: "BottomCenter"
    }, sourceEndpoint);


    jsPlumb.draggable($(".dragcodes"));



});

$('#dragcodes2').draggable({
    drag: function () {
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
        console.log('x: ' + xPos);
        console.log('y: ' + yPos);
    }
});