当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。