# jQuery drag full (ok)

#### draggable

![](/files/-MSOCCDgyKgl-gtVEAvr)

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

![](/files/-MSO4MXQE6-kQY9ypu16)

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**

![](/files/-MSOE-DNmybYQRrsFx35)

```
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**

![](/files/-MSO6ODBpfSscYq9VhX8)

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ũ**

![](/files/-MSO6pBgd1Zw0XEpy3wf)

![](/files/-MSO6uTPRRp3P2o3wyAM)

```
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**

![](/files/-MSO8eK0kvIzpTX4EfP8)

![](/files/-MSO8hXmL6Rg80MvnQ_W)

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**

![](/files/-MSOB45O-3G7CICzCjH-)

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**

![](/files/-MSOBxITVEMOr8F-eekP)

```
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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://javascriptuse.gitbook.io/advanced/jquery-drag-and-drop.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
