JSFiddle - React, Tailwind, and code Playground

by vrpruthvi

HTML

<div id='s102' class='drag'>102</div>
<div id='s103' class='drag'>103</div>
<div id='s104' class='drag'>104</div>
<div id='s105' class='drag'>105</div>
<div id='s106' class='drag'>106</div>
<div id='d101' style='top:100px;left:100px;height:200px'>DROP HERE</div>

CSS

div{
    border:solid 1px;width:100px;float:left;
}
span{
    position:absolute;left:10px;top:80px;color:red;
}

JavaScript

// SELECTIVE DROP JQUERY 
$(function() {
    $( "#d101" ).droppable({

        accept: "#s102, #s101, #s103, #s104, #s105, #s106",
 
        over: function (event, ui){
            if($(ui.helper).is('#s102')){
                $(this).append('<span>Can be dropped</span>');
            }
        },
        out: function (event, ui) {
            if($(ui.helper).is('#s102')){
                $('span',$(this)).remove();
            }
        },

    });
    $('.drag').draggable();
 });