> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/advanced/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://javascriptuse.gitbook.io/advanced/jquery-drag-and-drop.md).

# jQuery drag full (ok)

#### draggable

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MSOBDhwI535eLTGoRyh%2F-MSOCCDgyKgl-gtVEAvr%2FScreenshot_9.jpg?alt=media\&token=e1f36562-c64f-4046-959f-724630ee4ce4)

**Bài toán 1: Tạo scroll kéo khi đi qua màn hình trục y**

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MSNzG615j0cCxNsdTZ6%2F-MSO4MXQE6-kQY9ypu16%2FScreenshot_1.jpg?alt=media\&token=fe33a2e5-b263-4147-97d8-7ac1111a0194)

Chú ý không dùng chung với ***containment** vì khi dung thuộc tính này nó sẽ bị fixed :(*

```
scroll: true,
axis: "y"
```

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({
      scroll: true,
      axis: "y"
    });
  });
  </script>
  <div id="wrapper">
    <div id="drag">Lorem ipsum dolor sit amet.</div>
  </div>
  <style type="text/css">
    #wrapper {
      width: 150px;
      height: 150px;
      border: 1px solid blue;
    }
    #drag {
      width: 120px;
      height: 50px;
      border: 1px solid blue;
      border: 1px solid blue;
    }
  </style>
</body>
</html>
```

**Bài toán 1': Bài toán đặc biệt của scroll là scroll ngày wrapper cha**

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MSOBDhwI535eLTGoRyh%2F-MSOE-DNmybYQRrsFx35%2FScreenshot_10.jpg?alt=media\&token=794a701b-ea99-41ab-8a1a-15e79cb44af3)

```
overflow: scroll;
```

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({
      scroll: true,
      containment: "parent"
    });
  });
  </script>
  <div id="wrapper">
    <div id="drag">Lorem ipsum dolor sit amet.</div>
  </div>
  <style type="text/css">
  #wrapper {
    width: 380px;
    height: 380px;
    overflow: scroll;
    border: 4px solid red;
  }
  #drag {
    width: 120px;
    height: 50px;
    border: 1px solid blue;
    border: 1px solid blue;
  }
  .active-draggable {
    background-color: pink;
  }
  </style>
</body>
</html>
```

**Bài toán 2: Sử dụng containment để giới hạn khung kéo**

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MSO4PKP8VMvmKltIJFO%2F-MSO6ODBpfSscYq9VhX8%2FScreenshot_2.jpg?alt=media\&token=f57ef27a-2fc8-4980-89dd-d527750f8b6b)

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({
      containment: "#wrapper"
    });
  });
  </script>
  <div id="wrapper">
    <div id="drag">Lorem ipsum dolor sit amet.</div>
  </div>
  <style type="text/css">
    #wrapper {
      width: 150px;
      height: 150px;
      border: 4px solid red;
    }
    #drag {
      width: 120px;
      height: 50px;
      border: 1px solid blue;
      border: 1px solid blue;
    }
  </style>
</body>
</html>
```

#### **Bài toán 3: Khi kéo khối có duy chuyển về vị trí cũ**

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MSO4PKP8VMvmKltIJFO%2F-MSO6pBgd1Zw0XEpy3wf%2FScreenshot_3.jpg?alt=media\&token=f5d249d1-b1bb-4108-be7f-943238d78acb)

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MSO4PKP8VMvmKltIJFO%2F-MSO6uTPRRp3P2o3wyAM%2FScreenshot_4.jpg?alt=media\&token=ddda85c2-4aa0-4dec-a3d6-0c4b04054eee)

```
revert: true
```

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({
      revert: true
    });
  });
  </script>
  <div id="wrapper">
    <div id="drag">Lorem ipsum dolor sit amet.</div>
  </div>
  <style type="text/css">
    #wrapper {
      width: 150px;
      height: 150px;
      border: 4px solid red;
    }
    #drag {
      width: 120px;
      height: 50px;
      border: 1px solid blue;
      border: 1px solid blue;
    }
  </style>
</body>
</html>
```

#### **Bài toán 4: sử dụng nhân bản khối kéo**

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MSO4PKP8VMvmKltIJFO%2F-MSO8eK0kvIzpTX4EfP8%2FScreenshot_5.jpg?alt=media\&token=093f52e9-2a1b-459b-9d8a-e3e493763227)

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MSO4PKP8VMvmKltIJFO%2F-MSO8hXmL6Rg80MvnQ_W%2FScreenshot_6.jpg?alt=media\&token=bd352a16-add0-4c4e-92dd-b24d22ea60b0)

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'
    });
  });
  </script>
  <div id="wrapper">
    <div id="drag">Lorem ipsum dolor sit amet.</div>
  </div>
  <style type="text/css">
    #wrapper {
      width: 150px;
      height: 150px;
      border: 4px solid red;
    }
    #drag {
      width: 120px;
      height: 50px;
      border: 1px solid blue;
      border: 1px solid blue;
    }
  </style>
</body>
</html>
```

#### **Bài toán 5: lần lượt 3 sự kiện bắt đầu kéo, đang kéo, kết thúc kéo**

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MSO8rRQAAkSuXj-hnrF%2F-MSOB45O-3G7CICzCjH-%2FScreenshot_7.jpg?alt=media\&token=2426d127-bdd1-446b-9e47-946d69a1b2b1)

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({
      start: function(event, ui) {
        $(ui.helper[0]).addClass("active-draggable");
      },
      drag: function(event, ui) {
      },
      stop: function(event, ui) {
        $(ui.helper[0]).removeClass("active-draggable");
      }
    });
  });
  </script>
  <div id="wrapper">
    <div id="drag">Lorem ipsum dolor sit amet.</div>
  </div>
  <style type="text/css">
  #wrapper {
    width: 150px;
    height: 150px;
    border: 4px solid red;
  }
  #drag {
    width: 120px;
    height: 50px;
    border: 1px solid blue;
    border: 1px solid blue;
  }
  .active-draggable {
    background-color: pink;
  }
  </style>
</body>
</html>
```

**Bài toán 6: Vô hiệu hóa chức năng**

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MSOBDhwI535eLTGoRyh%2F-MSOBxITVEMOr8F-eekP%2FScreenshot_8.jpg?alt=media\&token=c5c95ab9-1ee8-423b-8377-b12fecaa6dfb)

```
disabled: true
```

```
<!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({
      disabled: true
    });
  });
  </script>
  <div id="wrapper">
    <div id="drag">Lorem ipsum dolor sit amet.</div>
  </div>
  <style type="text/css">
  #wrapper {
    width: 150px;
    height: 150px;
    border: 4px solid red;
  }
  #drag {
    width: 120px;
    height: 50px;
    border: 1px solid blue;
    border: 1px solid blue;
  }
  .active-draggable {
    background-color: pink;
  }
  </style>
</body>
</html>
```
