JSFiddle - React, Tailwind, and code Playground

by mrunali tatkundawar

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="list1" class="droppable list" data-max="-1"><!-- I want this to accept many. -->
  <div class="item draggable box1">1</div>
  <div class="item draggable box2">2</div>
  <div class="item draggable box3">3</div>
  <div class="item draggable box4">4</div>
</div>
<div id="list2" class="droppable list" ><!-- I want this to accept only 3. -->
  

</div>

CSS

div.list {
  border: 1px solid red;
  margin: 5px;
  min-height: 20px;
  width:300px;
      display: inline-flex;
}
div.list div {
  background: gray;
  margin: 4px;
      width: 75px;
    height: 50px;
}
.selected{
  border:2px solid green;
  
}

JavaScript

$(document).ready(function(){
    $(".droppable").droppable({
        drop: function(event, ui) {           
            var $list = $(this);
            $helper = ui.helper;         
            if ($helper.is('.box1, .box3')) {
                alert('Limit Exist')
                return false;
            }
                moveItem(ui.draggable,$list);   
          
        }, tolerance: "touch"
    });

    $(".draggable").draggable({    
        revert: "invalid",    
        helper: "clone",
        cursor: "move",
    
        drag: function(event,ui){ 
            var $helper = ui.helper;  
            if($('.selected').length > 0) {
                moveItem(ui.draggable); 
            }
        }
    });   
function moveItem( $item,$list ) {
debugger
    if ($('.selected').length > 0) {
    
    alert(" origin.");
         $item.fadeOut(function () {
            $item.appendTo('#list1').fadeIn();
            $item.removeClass('selected');
        });
    }   
    else {
        alert(" dropped.");
        
        $item.fadeOut(function () {
            $item.appendTo('#list2').fadeIn();
            $item.addClass('selected')
        });
    }
}
});