JSFiddle - React, Tailwind, and code Playground

by Riccal

HTML

<div class="grid clearfix">
    <div class="column" id ="c1">
        <div class="row">C1</div>
         <div class="row"></div>
         <div class="row"></div>
         <div class="row"></div>
    </div>
     <div class="column" id ="c2">
        <div class="row">C2</div>
         <div class="row"></div>
         <div class="row"></div>
         <div class="row"></div>
    </div>
     <div class="column" id ="c3">
        <div class="row">C3</div>
         <div class="row"></div>
         <div class="row"></div>
         <div class="row"></div>
    </div>
</div>

<div class="drag">Drag Me</div>

<label>Dragging outSide</label>

<p>drag left to right (c1 -> c2 -> c3) it's working fine.</p>
<p>But drag right to left (c3 -> c2 -> c1) it's not working.</p>

CSS

.grid{
    margin-bottom : 50px;
}
.row{
    text-align : center;
    height : 20px;
    width : 100px;
    border-bottom : 1px solid #000;
}

.column{
    float : left;
    width : 100px;
    border : 1px solid #000;
}

.drag{
    clear : both;
    width : 100px;
    height : 20px;
    background-color : #f3f3f3;
}

.clearfix:before,  .clearfix:after{
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0px;
      height: 0px;
}

.clearfix:after {
     clear: both;
}

.column.red{
    border-color : red;
}
label {
    font-size : 18px;
    font-weight : bold;
}

JavaScript

var isOutside = true;

$('.drag').draggable({
    helper : 'clone',
    drag : function(e, ui){
        if(isOutside)    
           return;
        //here is my code;
        console.log('inside dragging');
    },
});

$('.column').droppable({
    
    over : function(){
        isOutside = false;
        $('label').text('dragging inside');
        console.log('over', $(this).attr('id'));
    },
    out : function(){
         isOutside = true;
         $('label').text('dragging outside');
        console.log('out',  $(this).attr('id'));
    }
});