博客

jQuery UI的Droppable out事件

  • Post category:jquery

当元素从一个 Droppable 区域中拖出时，可以触发 jQuery UI 的 Droppable 的 out 事件。下面来详细讲解如何使用该事件，实现拖放功能。

一、基本语法

$(selector).droppable({
  out: function(event, ui) {
    // 处理代码
  }
});

二、参数说明

  • event：事件对象。
  • ui：可拖动的元素和当前接收器的元素。

三、示例说明

示例1：拖动图片出接收区域

HTML代码：

<div id="droppable">放置图片</div>
<img id="draggable" src="test.jpg">

JavaScript代码：

$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
  out: outFunction
});

function outFunction( event, ui ) {
  $( this )
    .addClass( "ui-state-highlight" )
    .find( "p" )
      .html( "拖动图片到这里" );
}

该示例中，使用 draggable 方法将图片设为可拖动元素，并使用 droppable 方法将 div 元素设为接收器。在接收器上添加 out 事件。当图片被从接收器中拖出，触发 out 事件，将 div 元素背景设为黄色，并显示文字“拖动图片到这里”。

示例2：使用 ui.draggable 和 ui.helper 属性

HTML代码：

<div id="droppable">放置图片</div>
<img id="draggable" src="test.jpg">

JavaScript代码：

$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
  out: function(event, ui) {
    console.log(ui.draggable.attr("id") + "已经被移出接收区域");
    console.log(ui.helper);
  }
});

该示例同样使用 draggable 方法将图片设为可拖动元素，并使用 droppable 方法将 div 元素设为接收器。在接收器上添加 out 事件，并使用 ui.draggable 获取当前被拖动的元素的 id，以及 ui.helper 获取当前被拖动的元素的 jQuery 对象。在控制台输出被移出接收区域的元素的 id，以及被拖动的元素的 jQuery 对象。

通过以上两个示例，可以看到 jQuery UI 的 Droppable 的 out 事件的用法。根据需求，可以对 out 事件进行扩展，实现更多交互效果。

Tags: