JSFiddle - React, Tailwind, and code Playground

by Elliot Franford

HTML

<div class="origin-point">Click!</div>
<div class="drop-point">Drop!</div>

CSS

.origin-point {
    color: white; 
    font-weight: bold; 
    background-color: #06a; 
    margin: 5em auto; 
    text-align: center; 
    line-height: 70px; 
    height: 70px; 
    width: 70px; 
    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%; 
    border-radius: 100%;
}

.drop-point {
    color: white; 
    font-weight: bold; 
    background-color: #06a; 
    margin: 5em auto; 
    text-align: center; 
    line-height: 70px; 
    height: 70px; 
    width: 70px; 
    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%; 
    border-radius: 100%;
}

#new-link-line {
    position: absolute;
    width: 3px;
    background-color: #06a;
    z-index: 100;
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -o-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
}
.connected-link-line {
    position: absolute;
    width: 3px;
    background-color: #06a;
    z-index: 100;
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -o-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
}

JavaScript

$('.origin-point').click(function(event) {
    var linkLine = $('<div id="new-link-line"></div>').appendTo('body');
    var origin = $(this);
    linkLine
        .css('top', origin.offset().top + origin.outerWidth() / 2)
        .css('left', origin.offset().left + origin.outerHeight() / 2);
    
    $(document).mousemove(function linkMouseMoveEvent(event) {
        if($('#new-link-line').length > 0) {
            var originX = origin.offset().left + origin.outerWidth() / 2;
            var originY = origin.offset().top + origin.outerHeight() / 2;
            
            var length = Math.sqrt((event.pageX - originX) * (event.pageX - originX) 
                + (event.pageY - originY) * (event.pageY - originY));
        
            var angle = 180 / 3.1415 * Math.acos((event.pageY - originY) / length);
            if(event.pageX > originX)
                angle *= -1;
        
            $('#new-link-line')
                .css('height', length)
                .css('-webkit-transform', 'rotate(' + angle + 'deg)')
                .css('-moz-transform', 'rotate(' + angle + 'deg)')
                .css('-o-transform', 'rotate(' + angle + 'deg)')
                .css('-ms-transform', 'rotate(' + angle + 'deg)')
                .css('transform', 'rotate(' + angle + 'deg)');
        }
    });

    $(document).bind('mousedown.link', function(event) {
        switch(event.which){
            case 1:
                if($(event.target).hasClass("drop-point")){
                  $(document).unbind('mousemove.link').unbind('click.link').unbind('keydown.link');             
                    console.log("unlinked");
                    $('#new-link-line').addClass("connected-link-line");
                    $('#new-link-line').attr("id","#connected-link-line");
                }
                break;
            default:
                // Cancel on right click
                endLinkMode();
                removeLine();
        }
    });

   ...