jQuery UI的Droppable hoverClass选项

当使用jQuery UI的Droppable插件时，hoverClass选项可用于设置drop区域的悬停时的样式。

语法

可以通过hoverClass选项来设置drop区域悬停时的样式：

$( ".droppable" ).droppable({
  hoverClass: "highlight"
});

参数说明

• hoverClass：设置当drop区域被拖拽时的悬浮样式。

示例说明

示例一

定义一个div元素作为draggable，并将它拖拽到名为“drop”的元素上，此时设置drop区域为highlight悬浮样式。

<div id="drag" class="ui-widget-content">
    <p>拖动我</p>
</div>

<div id="drop" class="ui-widget-header">
    <p>将我拖到其中一个可放置区域中</p>
</div>

$("#drag").draggable();
$("#drop").droppable({
  hoverClass: "highlight",
  drop: function(){
    alert("成功放置！");
  }
});

.highlight{
  background-color: yellow;
}

示例二

在通过使用该选项的示例中，当拖拽元素到下面元素周围约100像素的范围内时，设置highlight悬浮样式。

<div id="drag" class="ui-widget-content">
    <p>拖动我</p>
</div>

<div id="drop" class="ui-widget-header">
    <p>将我拖到其中一个可放置区域中</p>
</div>

$("#drag").draggable();
$("#drop").droppable({
  tolerance: "touch",
  hoverClass: "highlight",
  drop: function(){
    alert("成功放置！");
  }
});

.highlight{
  background-color: yellow;
}

在上面的示例中，tolerance: "touch"选项用于根据拖拽元素和下面元素之间的距离来确定是否激活drop回调函数。仅当两个元素之间的距离小于近距离时，才会激活drop回调函数，并设置悬浮样式为highlight。