JSFiddle - React, Tailwind, and code Playground

by bfelda

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script>
   
<div id="container" class="container">
    <div id="inner" class="inner">
         <div class='box'>
            <div class='lBox'></div>
            <div class='rBox'></div>
        </div>
        <div class='box' style="left:500px">
            <div class='lBox'></div>
            <div class='rBox'></div>
        </div>
    </div>    
</div>

CSS

.container{
    height:400px;
    width:600px;
    overflow:auto;
    position:relative;
}

.inner{
    width:1000px;
    height:1000px;
    position:relative;
}

.box {
    width: 140px; height: 100px;
    background-color:#fff;
    margin: 5px 50px;
    border: solid 1px #555;
    border-radius:10px;
    position:absolute;
    left:200px;
}

.lBox { float:left; background-color: #FF2E2E;  height: 40px; width: 20px; border-radius: 0 20px 20px 0; margin-top:30px;}
.rBox { float:right; background-color: #009E1D; height: 40px; width: 20px; border-radius: 20px 0 0 20px; margin-top:30px; }

JavaScript

$(".box").draggable({
    start: function (event) {
        event.stopPropagation();
    },
    drag: function (event, ui) {
        event.stopPropagation();
    }});
var startpointOptions = { isSource:true };
var startpoint = jsPlumb.addEndpoint($('.rBox'), startpointOptions);
var endpointOptions = { isTarget:true };
var endpoint = jsPlumb.addEndpoint($('.lBox'), endpointOptions);

var elem=$('.container'),
    clicking = false;

            elem.mousedown(function (e) {
                e.preventDefault();
                previousX = e.clientX;
                previousY = e.clientY;
                clicking = true;
            });

            elem.mouseup(function () {
                clicking = false
            });

            elem.mousemove(function (e) {

                if (clicking) {
                    e.preventDefault();
                    var directionX = (previousX - e.clientX) > 0 ? 1 : -1;
                    var directionY = (previousY - e.clientY) > 0 ? 1 : -1;
                    elem.scrollLeft(elem.scrollLeft() + (previousX - e.clientX));
                    elem.scrollTop(elem.scrollTop() + (previousY - e.clientY));
                    previousX = e.clientX;
                    previousY = e.clientY;
                }
            });

            elem.mouseleave(function (e) {
                    clicking = false;
            });