JSFiddle - React, Tailwind, and code Playground

by mrunali tatkundawar

HTML

<span id="span_asst" class="merch_image_slots">
<img id="image_merch_1" class="merchandiser_image" alt="image" src="images/image_merch_1.jpg" />

</span>

<div class='merch_slots'>
<div id='selected_item1' class='selected_item droppable'>

</div>

</div>

CSS

.selected_item
{
    width:122px;
    height:250px;
    float:left;
    background: white;
    margin-left:2px;
    margin-right:2px;
    border-color: #20548E;
    border-style: solid;
    border-width:2px;
    text-align:center;
    vertical-align:middle;
}

.merchandiser_image
{
    margin-left:2px;
    margin-right:2px;
    border-color: #20548E;
    border-style: solid;
    border-width:2px;
    height:250px;
}

JavaScript

$( ".merchandiser_image" ).draggable({
    revert: "invalid",
    containment: '.container',
    refreshPositions: true,
    cursor: 'move',
    drag: function(event, ui) {
        $('.droppable').addClass('ui-state-highlight');
    },
    stop: function(event, ui) {
        $('.droppable').removeClass('ui-state-highlight');
        if ( $.ui.ddmanager.drop( $(this).data("draggable"), event ) ) {
            alert( $(this).attr("id")+ ' was dropped' );
        }
        else {
            alert( 'it was not dropped' );
        }
    }
});


$( ".selected_item" ).droppable({
    hoverClass: "ui-state-active",
    drop: function( event, ui ) {
        var targetElem = $(this).attr("id");
        $( this )
        .addClass( "ui-state-highlight" )
        alert(targetElem);
    }
});