jQuery drag full (ok)

draggable

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

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

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

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ũ

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

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

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

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>

PreviousjQuery drag and drop (kéo thả bằng jQuery)NextjQuery drop full (ok)

Last updated 4 years ago

Was this helpful?