jQuery UI Draggable snap用法及代碼示例

jQuery UI Draggable 由選項、方法和事件組成。 snap 是 Draggable 的選項之一。當 snap 選項對任何元素為 true 時，它將粘在其他可拖動的元素上。我們還可以對另一個特定元素使用 snap 選項，這意味著我們可以選擇它應該粘貼或不粘貼的元素。 snap 選項支持布爾和選擇器類型。我們可以通過查看一些交互式示例來了解 snap 選項的工作原理。

在本文中，我們將學習如何使用 jQuery UI Draggable snap 選項。

用法:

$(".selector").draggable({
  snap:true
});

獲取快照選項：

var snap = $(".selector").draggable( "option", "snap" );

設置捕捉選項：

$(".selector").draggable( "option", "snap", true );

CDN 鏈接：首先，我們必須添加項目所需的 jQuery UI 腳本。

<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
<script src=”//code.jquery.com/jquery-1.12.4.js”></script>

範例1：在此示例中，將有四個框，它們都是可拖動的，並且都設置為 snap:true 選項。當我們移動其他元素附近的任何元素時，它會通過磁效應粘在它們上。

HTML


<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
     
    <link rel="stylesheet"
          href=
"https://code.jquery.com/ui/1.13.0/themes/dark-hive/jquery-ui.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
    <script src=
"https://code.jquery.com/ui/1.13.0/jquery-ui.js"
            integrity=
"sha256-xH4q8N0pEzrZMaRmd7gQVcTZiFei+HfRTBPJ1OGXC0k=" 
            crossorigin="anonymous">
    </script>
    <style>
        .box1 {
            display:flex;
            align-items:center;
            justify-content:center;
            font-family:roboto;
            width:100px;
            height:100px;
            background:#ccc;
            border-radius:10px;
        }
        .box2 {
            display:flex;
            align-items:center;
            justify-content:center;
            font-family:roboto;
            width:100px;
            height:100px;
            background:#ccc;
            border-radius:10px;
            margin-top:50px;
        }
        .box3 {
            display:flex;
            align-items:center;
            justify-content:center;
            font-family:roboto;
            width:100px;
            height:100px;
            background:#ccc;
            border-radius:10px;
            transform:translate(200px, -250px);
        }
        .box4 {
            display:flex;
            align-items:center;
            justify-content:center;
            font-family:roboto;
            width:100px;
            height:100px;
            background:#ccc;
            border-radius:10px;
            margin-top:50px;
            transform:translate(200px, -250px);
        }
    </style>
</head>
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>jQuery UI Draggable snap option</h3>
    <div class="draggable_box box1">Drag this box.</div>
    <div class="draggable_box box2">Drag this box.</div>
    <div class="draggable_box box3">Drag this box.</div>
    <div class="draggable_box box4">Drag this box.</div>
    <script>
        $(".draggable_box").draggable({
            snap:true,
        });
    </script>
</body>
</html>

輸出：

jQuery UI Draggable snap Option

範例2：在這個例子中，與第一個不同，我們將使用 snap 選項到特定元素，我們將有四個盒子，其中兩個是紅色的，兩個是藍色的，紅色盒子隻會粘在紅色盒子和藍色盒子上與藍色。

HTML


<!doctype html>
<head>
    <link rel="stylesheet"
          href=
"https://code.jquery.com/ui/1.13.0/themes/dark-hive/jquery-ui.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
    <script src=
"https://code.jquery.com/ui/1.13.0/jquery-ui.js"
            integrity=
"sha256-xH4q8N0pEzrZMaRmd7gQVcTZiFei+HfRTBPJ1OGXC0k=" 
            crossorigin="anonymous">
    </script>
    <style>
        .box1 {
            display:flex;
            align-items:center;
            justify-content:center;
            font-family:roboto;
            width:100px;
            height:100px;
            background:#ccc;
            border-radius:10px;
            background-color:red;
        }
        .box2 {
            display:flex;
            align-items:center;
            justify-content:center;
            font-family:roboto;
            width:100px;
            height:100px;
            background:#ccc;
            border-radius:10px;
            margin-top:50px;
            background-color:blue;
        }
        .box3 {
            display:flex;
            align-items:center;
            justify-content:center;
            font-family:roboto;
            width:100px;
            height:100px;
            background:#ccc;
            border-radius:10px;
            transform:translate(200px, -250px);
            background-color:red;
        }
        .box4 {
            display:flex;
            align-items:center;
            justify-content:center;
            font-family:roboto;
            width:100px;
            height:100px;
            background:#ccc;
            border-radius:10px;
            margin-top:50px;
            transform:translate(200px, -250px);
            background-color:blue;
        }
    </style>
</head>
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>jQuery UI Draggable snap option</h3>
    <div class="draggable_box box1 red1">Drag this box.</div>
    <div class="draggable_box box2 blue2">Drag this box.</div>
    <div class="draggable_box box3 red3">Drag this box.</div>
    <div class="draggable_box box4 blue4">Drag this box.</div>
    <script>
        $(".red1").draggable({
            snap:".box3",
        })
        $(".blue2").draggable({
            snap:".blue4",
        })
    </script>
</body>
</html>

輸出：

jQuery UI Draggable snap Option

參考鏈接：https://api.jqueryui.com/draggable/#option-snap

相關用法

注：本文由純淨天空篩選整理自iamgaurav大神的英文原創作品 jQuery UI Draggable snap Option。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。