# jQuery drop full (ok)

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MSOEAf2sBZuBfF1RVeN%2F-MSOFR-Ftgio2bVXRA1O%2FScreenshot_1.jpg?alt=media\&token=80376ff9-0eb2-484a-abaf-333259bcf108)

#### Bài toán 1: Tôi muốn kéo cả nội dung thẻ vào và nhân bản :)

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MSOEAf2sBZuBfF1RVeN%2F-MSOLS6e-OQ3HAzPPHEG%2FScreenshot_3.jpg?alt=media\&token=49d050bf-e57c-493e-bcaf-b9ac454790b8)

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MSOEAf2sBZuBfF1RVeN%2F-MSOLl-lyHEqtK4yPX3T%2FScreenshot_4.jpg?alt=media\&token=2177bbdf-d49d-4399-a0db-df31e39f5c31)

C:\xampp\htdocs\php\practic.html

```
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <script src="https://code.jquery.com/jquery.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="stylesheets/style.css" />
</head>
<body>
  <script type="text/javascript">
  jQuery(document).ready(function($) {
    $("#drag").draggable({
      helper: 'clone',
      tolerance: 'fit',
    });
    $('#drop').droppable({
      accerpt: '#drag',
      drop: function(e, ui) {
        x = ui.helper.clone();
        x.appendTo('#drop');
      }
    });
  });
  </script>
  <div id="wrapper">
    <div id="drag" class="drag">Lorem ipsum dolor sit amet.</div>
  </div>
  <div id="drop"></div>
  <style type="text/css">
  #wrapper {
    width: 280px;
    height: 280px;
    border: 4px solid red;
  }
  .drag {
    width: 150px;
    height: 50px;
    border: 1px solid blue;
    border: 1px solid blue;
  }
  #drop {
    width: 180px;
    height: 180px;
    border: 2px solid #000;
  }
  </style>
</body>
</html>
```
