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;
}

JavaScript

$(document).ready(function(){
    $(".droppable").droppable({
        drop: function(event, ui) {
            debugger
            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){
    debugger
            var $helper = ui.helper;  
            if($('.selected').length > 0) {
                moveSelected(ui.draggable); 
            }
        }
    });   
function moveItem( $item,$list ) {

    if ($('.selected').length > 0) {
    debugger
        alert(" origin.");
        $(".item").fadeOut(function () {
            $(".item").appendTo('#list1').fadeIn();
             $(".item").removeClass('selected');
        });
    }
    else {
    debugger
        alert(" dropped.");
        $item.addClass('selected')
        $item.fadeOut(function () {
            $item.appendTo('#list2').fadeIn();
        });
    }
}

});