jQuery UI的Draggable scope选项

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

jQuery UI Draggable scope 选项

scope 选项用于指定可拖动元素的范围。可以使用该选项来限制可拖动元素的拖动范围。

语法

$(selector).draggable({
  scope: "scopeName"
});

参数

scopeName: 用于指定可拖动元素的范围名称。

示例一：使用 scope 选项限制拖动范围

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI Draggable scope 选项示例</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>
    #draggable1, #draggable2 {
      width: 150px;
      height: 150px;
      background-color: #ccc;
      border: 1px solid #000;
      padding: 10px;
      position: absolute;
    }
    #draggable1 {
      top: 50px;
      left: 50px;
    }
    #draggable2 {
      top: 200px;
      left: 200px;
    }
    #droppable {
      width: 200px;
      height: 200px;
      background-color: #f00;
      border: 1px solid #000;
      padding: 10px;
      position: absolute;
      top: 100px;
      left: 100px;
    }
  </style>
  <script>
    $( function() {
      $( "#draggable1" ).draggable({
        scope: "group1"
      });
      $( "#draggable2" ).draggable({
        scope: "group2"
      });
      $( "#droppable" ).droppable({
        drop: function( event, ui ) {
          $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
              .html( "Dropped!" );
        }
      });
    } );
  </script>
</head>
<body>
  <div id="draggable1">
    <p>Drag me around</p>
  </div>
  <div id="draggable2">
    <p>Drag me around</p>
  </div>
  <div id="droppable">
    <p>Drop here</p>
  </div>
</body>
</html>

这将创建两个可拖动的元素，并使用 scope 选项将它们分别分组为 "group1" 和 "group2"。同时，创建一个可放置元素，当可拖动元素被放置在该元素上时，将在该元素上显示 "Dropped!"。在页面加载时，可拖动元素将被限制在其所属的组内。

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

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI Draggable scope 选项示例</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>
    #draggable1, #draggable2 {
      width: 150px;
      height: 150px;
      background-color: #ccc;
      border: 1px solid #000;
      padding: 10px;
      position: absolute;
    }
    #draggable1 {
      top: 50px;
      left: 50px;
    }
    #draggable2 {
      top: 200px;
      left: 200px;
    }
    #droppable {
      width: 200px;
      height: 200px;
      background-color: #f00;
      border: 1px solid #000;
      padding: 10px;
      position: absolute;
      top: 100px;
      left: 100px;
    }
  </style>
  <script>
    $( function() {
      $( "#draggable1" ).draggable({
        scope: "group1",
        revert: true
      });
      $( "#draggable2" ).draggable({
        scope: "group2",
        revert: true
      });
      $( "#droppable" ).droppable({
        drop: function( event, ui ) {
          $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
              .html( "Dropped!" );
        }
      });
    } );
  </script>
</head>
<body>
  <div id="draggable1">
    <p>Drag me around</p>
  </div>
  <div id="draggable2">
    <p>Drag me around</p>
  </div>
  <div id="droppable">
    <p>Drop here</p>
  </div>
</body>
</html>

这将创建两个可拖动的元素，并使用 scope 选项将它们分别分组为 "group1" 和 "group2"。同时，使用 revert 选项将可拖动元素拖动到放置元素上时，将自动返回到其原始位置。在页面加载时，可拖动元素将被限制在其所属的组内。

总结：

scope 选项用于指定可拖动元素的范围。可以使用该选项来限制可拖动元素的拖动范围。可以使用 $(selector).draggable({ scope: "scopeName" }); 来设置可拖动元素的范围。可以与其他选项一起使用，以实现更复杂的可拖动元素功能。

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

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

jQuery UI的Draggable scope选项

jQuery UI Draggable scope 选项

语法

参数

示例一：使用 scope 选项限制拖动范围

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

相关文章