jQuery UI的Droppable scope选项

jQuery UI Droppable 组件允许您将本地元素作为目标，并通过添加一个回调函数来接收拖放的元素。 Droppable 组件的 scope 选项可以用于定义应该响应哪些拖放事件，以及哪些 Droppable 元素可以接受这些事件，这在同一页面上有多个 Droppable 元素时非常有用。

scope 选项概述

scope 选项用于确定可以与 Droppable 元素进行交互的 Draggable 元素。如果 Draggable 元素的 scope 与 Droppable 元素的 scope 匹配，则 Droppable 元素将接受相应的 Draggable 元素。

scope 选项是一个 JavaScript 对象，其属性与需要匹配的 Draggable 元素的 "scope" 属性相对应。当 Draggable 元素在 Droppable 元素上释放时，检查它们两个的 scope 属性是否匹配，如果它们匹配，那么 Droppable 元素将被触发。

示例一：一个简单的Droppable应用

下面的示例显示了如何使用 scope 选项来实现一个简单的 Droppable 应用。首先，我们要创建两个具有不同 scope 属性的 Draggable 元素 (一个 "default"，一个 "special") 和两个不同的 Droppable 元素，并在它们中定义相应的 scope 属性。当拖动不同 scope 的 Draggable 元素并放到相应 Droppable 元素中，只有相应的 Droppable 元素才会触发。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Droppable Application</title>
  <link href="https://cdn.jsdelivr.net/jquery.ui/1.12.1/jquery-ui.min.css" rel="stylesheet">
  <style>
    #droppable1,
    #droppable2 {
      border: 2px dotted #000;
      height: 50px;
      width: 200px;
      margin-bottom: 10px;
    }
    #draggable1,
    #draggable2 {
      border: 2px solid #000;
      height: 50px;
      width: 50px;
      margin-right: 10px;
      display: inline-block;
      text-align: center;
      vertical-align: middle;
      line-height: 50px;
    }
  </style>
</head>
<body>
  <h1>Droppable Application</h1>
  <div id="draggable1" class="draggable" data-color="red" data-scope="default">Draggable 1</div>
  <div id="draggable2" class="draggable" data-color="blue" data-scope="special">Draggable 2</div>
  <br>
  <div id="droppable1" class="droppable" data-color="red" data-scope="default"></div>
  <div id="droppable2" class="droppable" data-color="blue" data-scope="special"></div>
  <script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.ui/1.12.1/jquery-ui.min.js"></script>
  <script>
    $(function() {
      $(".draggable").draggable({
        revert: true
      });
      $(".droppable").droppable({
        accept: function(draggable) {
          return $(this).data("scope") === draggable.data("scope");
        },
        drop: function(event, ui) {
          $(this).css("background-color", $(this).data("color"));
        }
      });
    });
  </script>
</body>
</html>

在此示例中，我们将每个元素的 "scope" 属性设置为 "default" 或 "special"，并在 Droppable 元素中使用 accept 选项检查是否应该与它们交互。如果匹配，则通过设置 css "background-color" 来标记正确的 Droppable 元素。可以运行此示例并尝试将 Draggable 元素放置到不同的 Droppable 元素中，以查看有哪些 Droppable 元素被正确地标记。

示例二：针对Droppable元素相应设置scope范围

下面的示例显示了如何设置 Droppable 元素的范围，以确保正确的 Droppable 元素只与正确的 Draggable 元素进行交互。在这个示例中，我们将 Droppable 元素 "scope" 属性设置为 "custom"。而在 Draggable 元素中，将范围设置为 "custom" 和 "accept"。这将允许 Droppable 元素固定指向具有正确 scope 的 Draggable 元素。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Droppable Application</title>
  <link href="https://cdn.jsdelivr.net/jquery.ui/1.12.1/jquery-ui.min.css" rel="stylesheet">
  <style>
    .draggable {
      border: 2px solid #000;
      height: 50px;
      width: 50px;
      margin-right: 10px;
      display: inline-block;
      text-align: center;
      vertical-align: middle;
      line-height: 50px;
    }
    .droppable {
      border: 2px dotted #000;
      height: 50px;
      width: 200px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>Droppable Application</h1>
  <div id="draggable1" class="draggable" data-color="red" data-scope="custom">Draggable 1</div>
  <div id="draggable2" class="draggable" data-color="blue" data-scope="accept custom">Draggable 2</div>
  <br>
  <div id="droppable1" class="droppable" data-color="red" data-scope="custom"></div>
  <div id="droppable2" class="droppable" data-color="blue" data-scope="custom"></div>
  <script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.ui/1.12.1/jquery-ui.min.js"></script>
  <script>
    $(function() {
      $(".draggable").draggable({
        scope: function() {
          return $(this).data("scope");
        },
        revert: true
      });
      $(".droppable").droppable({
        scope: function() {
          return $(this).data("scope");
        },
        drop: function(event, ui) {
          $(this).css("background-color", $(this).data("color"));
        }
      });
    });
  </script>
</body>
</html>

在此示例中，我们将每个元素的 "scope" 属性设置为 "custom"，并将 "scope" 选项分别应用于 Droppable 和 Draggable 元素。可以运行此示例并尝试将 Draggable 元素放置到不同的 Droppable 元素中，以查看有哪些 Droppable 元素可以接受哪些 Draggable 元素。

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

jQuery UI的Droppable scope选项

scope 选项概述

示例一：一个简单的Droppable应用

示例二：针对Droppable元素相应设置scope范围

相关文章