jQuery UI Droppable widget()方法

jQuery UI 是一种扩展了基本的 jQuery 核心库的插件，其中的 Droppable widget 可以实现对于元素的“放置”操作，具有很高的可定制性和扩展性。下面我将详细讲解使用 Droppable widget 的方法及相关示例。

droppable() 方法的基本用法

Droppable widget 提供了一个 droppable() 方法，可以让元素成为一个“可放置”元素，该方法可以接收一个参数对象，用于配置元素的放置行为。下面是一个基本的示例：

<div id="droppable"></div>

<script>
$( "#droppable" ).droppable({
  accept: ".draggable",
  drop: function() {
    alert( "Dropped!" );
  }
});
</script>

在以上示例中，首先用 div 元素创建了一个“可放置”区域，即 droppable 元素。调用 .droppable() 方法后，使用 accept 参数指定了可以被放置在该元素上的元素类名，这里为 .draggable。同时，使用 drop 参数指定了元素在放置时的行为，这里为弹出一个提示框。

配置 drop 事件的回调函数

为了更好地实现对于 Droppable widget 的定制，我们可以在 drop 参数中设置一个回调函数，例如对于一个可放置的购物车，可以将被放置的商品数量实时更新到右上角：

<div id="droppable">
  <span class="ui-icon ui-icon-cart"></span>
  <span class="ui-icon ui-icon-refresh" style="float: right;"></span>
</div>

<script>
$('#droppable').droppable({
    accept: '.draggable',
    drop: function(event, ui) {
        var item = ui.draggable.text();
        $('<p>' + item + '</p>').appendTo('#droppable');
        var itemCount = $("#droppable p").length - 1; 
        $("#droppable .ui-icon-refresh").html(itemCount);  
    }
});
</script>

在以上示例中，通过 ui.draggable 可以获取到被拖动的元素对象，通过 .text() 方法可以获取到该元素的内容，然后将其添加到购物车中。最后，使用 jQuery 选择器获取购物车中的数量标记并更新其内容。

更多的 droppable() 方法选项说明

除了以上这些参数，droppable() 方法还提供了其他多种可配置的选项，如下：

• active：规定当元素被激活时的样式。
• tolerance：指定放置位置的匹配方式。可选值包括："fit"（完美匹配）、"intersect"（重叠匹配）、"pointer"（鼠标指针匹配）、"touch"（触摸匹配）。
• hoverClass：指定当光标在该元素上悬停时应用的样式。
• drop()：放置操作的回调函数，可以在里面编写元素的行为逻辑。
• out()：从该元素上移出时的回调函数。
• over()：拖动元素经过该元素时的回调函数。

更多详情请参考官方文档：https://api.jqueryui.com/droppable/