JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="dragthis"></div> 

<div id="placehere"></div>

CSS

html { position: relative; }

.dragthis {
    background: #222;
    width: 100px;
    height: 100px;
    margin: 30px;
}

.shield {
    position: fixed;
    z-index: 9991;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    display: none;
    background: red;
    opacity: 0.4;
}

#placehere {
    background: #e1e1e1;
    border: 1px solid #999;
    height: 200px;
    width: 200px;
}

JavaScript

$('.dragthis').each(function() {
    
    var obj = $(this),
        objD = obj.data(),
        obj_marginT = parseInt( obj.css('margin-top'), 10 ),
        obj_marginL = parseInt( obj.css('margin-left'), 10 ),
        obj_classes = obj.attr('class');

    $('<div class="shield" />').appendTo( obj );
    var shield = obj.find('.shield');
    
    obj.on('mousedown mouseup mousemove', function( e ) {
    
        if ( e.type === 'mousedown' || objD.press && e.type === 'mousemove' ) {
            
            // Make a placeholder element
            if ( e.type === 'mousedown' ) {
                
                $('<div class="benchwarmer '+ obj_classes +'">').insertAfter( obj );
                
                obj.data({ 'press': true }); 

                shield.show();
                
            }

            var cursorY = e.pageY - obj_marginT,
                cursorX = e.pageX - obj_marginL;
            
            obj.css({
                top: cursorY, 
                left: cursorX, 
                position: 'absolute'
            });
            
            var placehere = $('#placehere');
            
            if ( 
                cursorX < ( placehere.offset().left + placehere.width() ) && 
                cursorY < ( placehere.offset().top + placehere.height() ) && 
                cursorX > ( placehere.offset().left ) && 
                cursorY > ( placehere.offset().top )  
            ) {
                alert('-');
            }
            
        }
        else if ( e.type === 'mouseup' ) {

            obj.next('.benchwarmer').remove();
            
            obj.data({ 'press': false });

            shield.hide();

            obj.css({ 
                top: 0, 
                left: 0, 
                position: 'relative' 
            });
            
        }
    
    });
    
});