JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<script src="http://eruciform.com/static//jquidragcollide/jquery-collision.js"></script>
<script src="http://eruciform.com/static//jquidragcollide/jquery-ui-draggable-collision.js"></script>
<div id="moveInHere">

    <div id="01" class="dragMe">Drag me...</div>
    <div id="02" class="dragMe">Drag me...</div>
    <div id="03" class="dragMe not">Drag me...</div>
    <div id="04" class="dragMe">Drag me...</div>
    


</div>

CSS

#moveInHere {
    with: 500px;
    height: 500px;
    border: 1px solid black;
    background: #eee;
}
.dragMe{
    width: 50px;
    height: 50px;
    border: 1px solid black;
    background: #eee;
}
#butNotHere{
    float: right; 
    with: 50px;
    height: 50px;
    border: 1px solid black;
    background: #aaa;
}

JavaScript

$(".dragMe").draggable({
    obstacle: ".not",
    preventCollision: true,
    drag: function() {
        $('#moveInHere div').css('background','green');
        $(this).css('background','none');
        $('#moveInHere div').addClass('not');
        $(this).removeClass('not');
    },
    stop: function() {
        $('#moveInHere div').css('background','none');
        $('#moveInHere div').removeClass('not');
    }
})