JSFiddle - React, Tailwind, and code Playground

by gion_13

HTML

<div class="square draggable"></div>
<div class="square draggable"> </div>
<div class="square draggable"></div>
<div class="placeholder">drop me here</div>

CSS

div{
    text-align : center;
}
.square  {
    position : relative;
    width : 100px;
    height : 100px;
    background-color :red;
    margin : 20px;
    cursor : pointer;
}

.placeholder{
    width : 150px;
    height : 150px;
    position : fixed;
    right : 0;
    top : 0;
    background-color : green;
    z-index:-1;
}
.placeholder.other_class{
    background-color : blue;
}

JavaScript

var draggable = $('.square'),
    placeholder = $('.placeholder');
    window.isDragged = true;
draggable
    .bind('mousedown',function(e){
        isDragged = true;
        var o = $(this).offset();
        $(this).data('clickOffset',{
            left : e.pageX - o.left,
            top : e.pageY - o.top
        }); 
    })
    .bind('mousemove',function(e){
        var o = $(this).data('clickOffset');
        if(o)
            $(this).offset({
                top : e.pageY - o.left,
                left : e.pageX - o.top 
            });
    });
$(document)
    .mouseup(function(){
     isDragged =false;   draggable.each(function(){$(this).removeData('clickOffset');   });
    });
placeholder
    .mousemove(
        function(){
            if(isDragged)
                $(this).addClass('other_class');
        })
    .mouseout(
        function(){
            $(this).removeClass('other_class');
        }
    );