JSFiddle - React, Tailwind, and code Playground

by lawrencealan

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div class="drop" id="dropMove">Drop Move</div>
<div class="drop" id="dropLive">Drop Link</div>
<div style="clear:both"></div>
<a draggable="false" href="#" id="dragme">Drag Me</a>

<div id="cursor-block" style="clear:both"></div>

SCSS

.blankcursor {

     cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjbQg61aAAAADUlEQVQYV2P4//8/IwAI/QL/+TZZdwAAAABJRU5ErkJggg=='),
    url(images/blank.cur),
    none;

}
html{
  

    &.dragging { 
        @extends .blankcursor;
        body * {          @extends .blankcursor;  }
        #cursor-block
        {
            display:block;
            background-position:-252px 0;
                &.dropLive {
                    background-position:-176px -106px;
                }
                &.dropMove {
                    background-position:0 0;
                }

        }
        .drop:hover {
            opacity:1;
         }
      }
   }


.drop {
    height: 150px;
    margin-bottom: 14px;
    padding: 7px;
    width: 150px;
    margin: 0 30px 10px 0;
    float: left;
    opacity:0.8;
}
 
#cursor-block {
    display:none;
    position:absolute;
    background-image: url('http://hemeon.com/icons/images/cursor-pointer-arrow-icons.png');
    background-position:-378px 0;
    width:48px;
    margin:-16px 0 0 -16px;
    height:48px;
    pointer-events: none;
}
#dropMove {
    background-color: #add8e6;
    border: solid 2px darkblue;
}
#dropLive {
    background-color: #e6d8ad;
    border: solid 2px darkred;
}
#dragme {
    background-color: #90ee90;
    border: solid 2px #006400;
    display: block;
    height: 70px;
    width: 70px;
    line-height: 70px;
    text-align: center;
    text-decoration: none;
    color: #000;
    cursor: hand !important;
}

JavaScript

var
$html,
_cursor,
$cursor,
_pos = {
    x: -100,
    y: -100
};


$(function () {
    $html = $('html');
    _cursor = document.getElementById('cursor-block');
    $cursor = $(_cursor);
    $("#dragme").draggable({
        start: function () {
            $html.toggleClass('dragging', true);
        },
        stop: function () {
            $html.toggleClass('dragging', false);
        }
    });
    $(".drop").droppable({
        drop: function (event, ui) {
            $(this)
                .addClass("ui-state-highlight")
                .html("Dropped!");
        },
        over: function (event, ui) {
            $cursor.addClass(this.id);
        },
        out: function (event, ui) {
            $cursor.removeClass(this.id);
        }

    });
});
$(window).on('mousemove dragover', function (ev) {
    _pos.x = ev.pageX + 1;
    _pos.y = ev.pageY + 1;
    updateCursor();
});

var updateCursor = function () {
    _cursor.style.left = _pos.x + "px";
    _cursor.style.top = _pos.y + "px";
};