JSFiddle - React, Tailwind, and code Playground

by 9edge

HTML

<html>
  <head>
  </head>
  <body>
   <div>
       <ul>
      <li style="border: 1px solid black" id="drag">test1</li>
    <li style="border: 1px solid black" id="drag">test2</li>
    <li style="border: 1px solid black" id="drag">test3</li>
   </ul>
   <ul>
    <li style="border: 1px solid black" id="drag">foo7</li>
    <li style="border: 1px solid black" id="drag">foo8</li>
    <li style="border: 1px solid black" id="drag">foo9</li>
       </ul></div>
      <div id="div1"></div>
  </body>
</html>

CSS

div{
    width: 450px;
    height: 100px;
}
ul{
    width: 200px;
    float: left;
    margin-left: 20px;
    height: 200px;
}
#div1{
    width: 200px;
    height: 200px;
    background-color: #FF0000;
    margin: 50px 0 0 20px;
}

JavaScript

$(function() {
    var limit = 2;
    var counter = 0;
    $("[id=drag]").draggable({
        revert: "invalid"
    });
    $('#div1').droppable({
        drop: function() {
            counter++;
            if (counter == limit) {
                $(this).droppable("disable");
            }
        }
    });
});