Demo : https://www.lenlop123.com/2020/08/22-droppable.html

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<style>
  .div_draggable {
    width: 100px;
    height: 100px;
    padding: 0.5em;
    float: left;
    margin: 10px 10px 10px 0;
    background-color: brown;
    z-index: 2;
  }

  .div_droppable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
    float: left;
    margin: 10px;
    background-color: aqua;
    z-index: 1;
  }

  .div_droppable_blue {
    background-color: blue;
  }

  .div_droppable_red {
    background-color: red;
  }

  .div_droppable_yellow {
    background-color: yellow;
  }

  .highlight {
    background-color: chartreuse;
  }
</style>


<div id="div_draggable1" class="div_draggable">
  <p>div drag 1</p>
</div>
<div id="div_draggable2" class="div_draggable">
  <p>div drag 2</p>
</div>


<div id="div_droppable_all" class="div_droppable">
  <p>div drop, * </p>
</div>
<div id="div_droppable_accept1" class="div_droppable">
  <p>div drop accept drag 1 (Options)</p>
</div>
<div style="clear: both;"></div>


<div id="div_droppable_activeClass" class="div_droppable">
  <p>div drop, activeClass (Options) </p>
</div>

<div id="div_droppable_activate" class="div_droppable">
  <p>div drop, activate deactivate(Event)</p>
</div>

<div id="div_droppable_activate_drop" class="div_droppable">
  <p>div drop, activate drop(Event)</p>
</div>
<div style="clear: both;"></div>


<div id="div_droppable_hoverClass" class="div_droppable">
  <p>div drop, hoverClass (Options)</p>
</div>

<div id="div_droppable_out" class="div_droppable">
  <p>div drop, out over (Event)</p>
</div>
<div style="clear: both;"></div>


<div id="div_droppable_tolerance_fit" class="div_droppable">
  <p>div drop, tolerance fit (100%) (Options)</p>
</div>

<div id="div_droppable_tolerance_intersect" class="div_droppable">
  <p>div drop, tolerance intersect (50%) (Options)</p>
</div>

<div id="div_droppable_tolerance_pointer" class="div_droppable">
  <p>div drop, tolerance pointer (mouse pointer) (Options)</p>
</div>

<div id="div_droppable_tolerance_touch" class="div_droppable">
  <p>div drop, tolerance touch (chạm) (Options)</p>
</div>
<div style="clear: both;"></div>


<div id="div_droppable_disabled" class="div_droppable">
  <p>div drop, disabled (Options)</p>
  <label><input type='radio' name='r1' id='r1' value='true' checked> True</label>
  <label><input type='radio' name='r1' id='r2' value='false'>False</label>
</div>


<div id="droppable1" class="droppable ui-widget-header"
  style="background-color: burlywood;padding: 10px;height: 300px;width: 300px;;float: left;">
  <p>greedy (Options)</p>

  <div id="droppable2" class="droppable ui-widget-header"
    style="background-color: cyan;padding: 10px;height: 250px;width: 250px;">
    <p>Dropp here</p>
    <div id="droppable3" class="droppable ui-widget-header"
      style="background-color: darkcyan;padding: 10px;height: 200px;width: 200px;">
      <p>Dropp here</p>
      <label><input type='radio' name='ra_greedy' id='r1' value='true' checked> True</label>
      <label><input type='radio' name='ra_greedy' id='r2' value='false'>False</label>
    </div>
  </div>
</div>
<div style="clear: both;"></div>





<script>
  $(function () {
    // kéo
    $("#div_draggable1").draggable();
    $("#div_draggable2").draggable();
    $("#div_droppable_all").draggable();

    // ------------------------------ -------------------------------- -----------------------------
    // droppable - thả
    $("#div_droppable_all").droppable({
      drop: function (event, ui) {
        $(this).css("background-color", "yellow");

      }
    });






    // ------------------------------ -------------------------------- -----------------------------
    // droppable - accept
    $("#div_droppable_accept1").droppable({
      accept: "#div_draggable2",
      drop: function (event, ui) {
        $(this)
          .css("background-color", "yellow");
      }
    });

    // Getter accept
    // var accept = $( "#div_droppable_accept1" ).droppable( "option", "accept" );

    // Setter accept        
    $("#div_droppable_accept1").droppable("option", "accept", "#div_draggable1");


    // ------------------------------ -------------------------------- -----------------------------
    // droppable - activeClass
    $("#div_droppable_activeClass").droppable({
      activeClass: "div_droppable_blue",
      drop: function (event, ui) {
        $(this).css("background-color", "yellow");
      }
    });

    // var activeClass = $( "#droppable" ).droppable( "option", "activeClass" );
    $("#div_droppable_activeClass").droppable("option", "activeClass", "div_droppable_blue");

   
   
    // activate
    $("#div_droppable_activate").droppable({
      activate: function (event, ui) {
        $(this)
          .find("p")
          .html("started moving ");
      },
      deactivate: function (event, ui) {
        // deactivate ghi đè lên drop
        $(this).find("p").html("stopped  ");
      },    
    });

    $("#div_droppable_activate_drop").droppable({
      activate: function (event, ui) {
        $(this).find("p").html("started moving ");
      },    
      drop: function (event, ui) {
        $(this).find("p").html("dropped  ");
      }
    });
   

    // ------------------------------ -------------------------------- -----------------------------
   

    // var addClasses = $( "#droppable" ).droppable( "option", "addClasses" );
    // $( "#droppable" ).droppable( "option", "addClasses", false );


    // ------------------------------ -------------------------------- -----------------------------
    //  addClasses: false - sẽ khoa ko cho hàm classes:
    $("#div_droppable_hoverClass").droppable({
      hoverClass: "div_droppable_red",
      drop: function (event, ui) {
        $(this).css("background-color", "yellow");
      }
    });

      // ------------------------------ -------------------------------- -----------------------------
      $("#div_droppable_out").droppable({      
        tolerance: "touch",
      out: function (event, ui) {
        $(this).find("p").html("out  ");
      },
      over: function (event, ui) {
        $(this).find("p").html("over  ");
      }
    });
   

    //var class_used = $( "#droppable" ).droppable( "option", "hoverClass" );
    //$( "#droppable" ).droppable( "option", "hoverClass", "ui-state-active" );



    // ------------------------------ -------------------------------- -----------------------------
    //  tolerance : vị trí được tính là droppable - có thể kết hợp với hoverClass
    $("#div_droppable_tolerance_fit").droppable({
      tolerance: "fit",
      hoverClass: "div_droppable_red",
      drop: function (event, ui) {
        $(this).css("background-color", "yellow");
      }
    });

    $("#div_droppable_tolerance_intersect").droppable({
      tolerance: "intersect",
      hoverClass: "div_droppable_red",
      drop: function (event, ui) {
        $(this).css("background-color", "yellow");
      }
    });

    $("#div_droppable_tolerance_pointer").droppable({
      tolerance: "pointer",
      hoverClass: "div_droppable_red",
      drop: function (event, ui) {
        $(this).css("background-color", "yellow");
      }
    });

    $("#div_droppable_tolerance_touch").droppable({
      tolerance: "touch",
      hoverClass: "div_droppable_red",
      drop: function (event, ui) {
        $(this).css("background-color", "yellow");
      }
    });

    // var tolerance_used = $( "#droppable" ).droppable( "option", "tolerance" );
    // $( '#droppable' ).droppable( "option", "tolerance", 'pointer' );





    // ------------------------------ -------------------------------- -----------------------------
    //disabled
    $("#div_droppable_disabled").droppable({
      classes: {
        "ui-droppable": "div_droppable_red",
        "ui-droppable-hover": "div_droppable_yellow"
      },
      disabled: true,
      drop: function (event, ui) {
        //$(this).css("background-color", "yellow");
      }
    });

    $("input:radio[name=r1]").click(function () {
      var sel = ($(this).val() == 'true');
      $("#div_droppable_disabled").droppable("option", "disabled", sel);
      alert(sel);
    })

    // var status_used = $( "#droppable" ).droppable( "option", "disabled" );
    // $( "#droppable" ).droppable( "option", "disabled", true );



    // ------------------------------ -------------------------------- -----------------------------
    // greedy
    $(".droppable").droppable({
      greedy: true,
      drop: function (event, ui) {
        $(this)
          .find("p")
          .html(" Dropped! " + event.target.id);
      }
    });

    $("input:radio[name=ra_greedy]").click(function () {
      var sel = ($(this).val() == 'true');
      $(".droppable").droppable("option", "greedy", sel);
      alert(sel);
    })

    // var status = $( ".droppable" ).droppable( "option", "greedy" );
    // $( ".droppable" ).droppable( "option", "greedy", true );



  });
</script>




Droppable

thuộc tínhsử dụng
acceptKhai báo các element được chấp nhận việc kéo thả lên element này. Khai báo bằng selector
classesthay đổi class tương ứng trạng thái khi một phần tử nằm trong danh sách accept đang di chuyển thì sẽ kích hoạt active. Khi phần tử đó trong phạm vi thì kích hoạt trạng thái hover
activateSự kiện xảy ra khi một phần tử trong danh sách accept bắt đầu drag
deacrivateSự kiện xảy ra khi một phần tử trong danh sách accept ngừng drag
overSự kiện xảy ra khi một phần tử di chuyển lên trên đối tượng
outSự kiện xảy ra khi một phần tử di chuyển ra ngoài đối tượng
dropSự kiện xảy ra khi một phần tử đã được di chuyển lên đối tượng và thả ra