jQuery UI 可拖动捕捉选项

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 脚本。

示例 1：在此示例中，将有四个框，它们都是可拖动的，并且都设置为snap: true选项。当我们移动其他元素附近的任何元素时，它会通过磁效应粘在它们上。

HTML

  

    
     
    
    
    
    
    
    
        .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);
        }
    


    GeeksforGeeks
    jQuery UI Draggable snap option
    Drag this box.
    Drag this box.
    Drag this box.
    Drag this box.
    
        $(".draggable_box").draggable({
            snap: true,
        });
    

输出：

示例 2：在这个示例中，与第一个示例不同，我们将对特定元素使用snap选项，我们将有四个盒子，其中两个是红色的，两个是蓝色的，红色盒子只会粘在红色盒子上，带蓝色的蓝色框。

HTML

    
    
    
    
    
    
        .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;
        }
    


    GeeksforGeeks
    jQuery UI Draggable snap option
    Drag this box.
    Drag this box.
    Drag this box.
    Drag this box.
    
        $(".red1").draggable({
            snap: ".box3",
        })
        $(".blue2").draggable({
            snap: ".blue4",
        })
    

输出：

参考链接： https://api.jqueryui.com/draggable/#option-snap