jQuery UI Droppable greedy 选项

jQuery UI Droppable 插件中的 greedy 选项可以控制禁止嵌套排序，当 draggable 元素拖放到 droppable 元素中时，如果该 droppable 元素有子元素可以接收拖放事件，此时设置 greedy 选项为 true 则可以阻止子元素接收事件，而让父元素来处理事件，从而避免了事件嵌套排序。

下面提供两个示例来说明 greedy 选项的使用：

示例1：

以下示例中有三个 droppable 元素，其中第二个 droppable 元素内嵌了一个子元素，可以接收 draggable 元素的拖拽事件。使用 greedy 选项可以仅将 draggabel 元素拖拽到第二个 droppable 元素本身上，而不会触发子元素的拖拽事件。

<style>
  .box {
    width: 100px;
    height: 100px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
    display: inline-block;
  }
  .inner {
    width: 50px;
    height: 50px;
    background-color: #ccc;
    margin: 10px;
  }
</style>

<div class="box" id="droppable1">Droppable 1</div>
<div class="box" id="droppable2">
  Droppable 2
  <div class="inner">Inner droppable 2</div>
</div>
<div class="box" id="droppable3">Droppable 3</div>

<div class="box" id="draggable">Draggable</div>

<script>
  $(function() {
    $("#draggable").draggable();

    $(".box").droppable({
      greedy: true,
      drop: function(event, ui) {
        $(this).addClass("ui-state-highlight").html("Dropped!");
      }
    });
  });
</script>

示例2：

以下示例中有一个 droppable 元素，在其中嵌套了多个子元素，且每个子元素都可以接收 draggable 元素的拖拽事件。使用 greedy 选项可以仅将 draggabel 元素拖拽到第二个 droppable 子元素中，而不会触发更外层的 droppable 元素拖拽事件。

<style>
  .box {
    width: 100px;
    height: 100px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
    display: inline-block;
  }
  .inner {
    width: 50px;
    height: 50px;
    background-color: #ccc;
    margin: 10px;
  }
</style>

<div class="box" id="droppable1">
  Droppable 1
  <div class="inner">Inner droppable 1-1</div>
  <div class="inner">Inner droppable 1-2</div>
  <div class="inner">Inner droppable 1-3</div>
</div>

<div class="box" id="draggable">Draggable</div>

<script>
  $(function() {
    $("#draggable").draggable();

    $(".box").droppable({
      greedy: true,
      drop: function(event, ui) {
        $(this).addClass("ui-state-highlight").html("Dropped!");
      }
    });
  });
</script>

以上两个示例展示了 greedy 选项的基本用法，具体应用可以根据实际情况进行调整。