jQuery UI的dragable snapMode选项

以下是关于 jQuery UI 的 Draggable snapMode 选项的详细攻略：

jQuery UI Draggable snapMode 选项

snapMode 选项用于指定可拖动元素在拖动期间对齐到其他元素的方式。可以使用该选项来控制可拖动元素在拖动期间对齐到其他元素的方式。

语法

$(selector).draggable({
  snapMode: "mode"
});

参数

mode: 用于指定可拖动元素在拖动期间对齐到其他元素的方式。可选值包括 "inner"、"outer" 和 "both"。

示例一：使用 snapMode 选项对齐到其他元素

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI Draggable snapMode 选项示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
  <style>
    #draggable {
      width: 150px;
      height: 150px;
      background-color: #ccc;
      border: 1px solid #000;
      padding: 10px;
      position: absolute;
    }
    #droppable1, #droppable2 {
      width: 150px;
      height: 150px;
      background-color: #f00;
      border: 1px solid #000;
      padding: 10px;
      position: absolute;
      top: 50px;
      left: 50px;
    }
    #droppable2 {
      top: 200px;
      left: 200px;
    }
  </style>
  <script>
    $( function() {
      $( "#draggable" ).draggable({
        snap: "#droppable1, #droppable2",
        snapMode: "outer"
      });
      $( "#droppable1, #droppable2" ).droppable({
        drop: function( event, ui ) {
          $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
              .html( "Dropped!" );
        }
      });
    } );
  </script>
</head>
<body>
  <div id="draggable">
    <p>Drag me around</p>
  </div>
  <div id="droppable1">
    <p>Drop here</p>
  </div>
  <div id="droppable2">
    <p>Drop here</p>
  </div>
</body>
</html>

这将创建一个可拖动的元素，并使用 snapMode 选项将其对齐到其他两个元素上。在页面加载时，可拖动元素将对齐到其他两个元素的外部。

示例二：使用 snapMode 选项和其他选项

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI Draggable snapMode 选项示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
  <style>
    #draggable {
      width: 150px;
      height: 150px;
      background-color: #ccc;
      border: 1px solid #000;
      padding: 10px;
      position: absolute;
    }
    #droppable1, #droppable2 {
      width: 150px;
      height: 150px;
      background-color: #f00;
      border: 1px solid #000;
      padding: 10px;
      position: absolute;
      top: 50px;
      left: 50px;
    }
    #droppable2 {
      top: 200px;
      left: 200px;
    }
  </style>
  <script>
    $( function() {
      $( "#draggable" ).draggable({
        snap: "#droppable1, #droppable2",
        snapMode: "both",
        snapTolerance: 10
      });
      $( "#droppable1, #droppable2" ).droppable({
        drop: function( event, ui ) {
          $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
              .html( "Dropped!" );
        }
      });
    } );
  </script>
</head>
<body>
  <div id="draggable">
    <p>Drag me around</p>
  </div>
  <div id="droppable1">
    <p>Drop here</p>
  </div>
  <div id="droppable2">
    <p>Drop here</p>
  </div>
</body>
</html>

这将创建一个可拖动的元素，并使用 snapMode 选项将其对齐到其他两个元素上。同时，使用 snapTolerance 选项来指定对齐的容差值。在页面加载时，可拖动元素将对齐到其他两个元素的内部或外部，容差值为 10 像素。

总结：

snapMode 选项用于指定可拖动元素在拖动期间对齐到其他元素的方式。可以使用该选项来控制可拖动元素在拖动期间对齐到其他元素的方式。可以使用 $(selector).draggable({ snapMode: "mode" }); 来设置 snapMode 选项。可以与其他选项一起使用，以实现更复杂的可拖动元素功能。

以上是关于 jQuery UI 的 Draggable snapMode 选项的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery UI的dragable snapMode选项 - Python技术站

jQuery UI的dragable snapMode选项

jQuery UI Draggable snapMode 选项

语法

参数

示例一：使用 snapMode 选项对齐到其他元素

示例二：使用 snapMode 选项和其他选项

相关文章