博客

jQuery UI Droppable widget()方法

  • Post category:jquery

下面是关于”jQuery UI Droppable widget()方法”的详细讲解攻略。

jQuery UI Droppable widget() 方法简介

jQuery UI Droppable widget() 方法用于将指定的DOM元素设置为可接收拖放的区域，被拖放的元素将会落入指定的容器并执行指定的回调函数。

使用 Droppable widget() 方法

使用 Droppable widget() 方法时，需要先加载 jQuery UI 库，代码如下：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

基本语法

$(selector).droppable(options)

options 参数说明

参数 默认值 描述
accept ‘*’ 限定哪种元素可以拖放到目标元素上，可以是元素选择器或函数
activeClass null 拖放元素激活时的样式类名
addClasses true 是否自动添加样式类到目标元素上
greedy false 是否阻止事件冒泡
hoverClass null 拖动元素悬浮时的样式类名
scope ‘default’ 有多个 droppable 元素时指定一个作用域
tolerance ‘intersect’ 判定拖动元素是否完全进入目标元素的算法

示例1：简单的拖放

下面的代码示例将一个 div 元素设置为可拖放的区域，其中 accept 参数指定了可以拖放到该 div 中的元素类型，drop 参数指定了拖放完成后要执行的回调函数。

<div id="droppable">可以拖入的区域</div>
<div id="draggable">可以拖动的元素</div>

$("#droppable").droppable({
  accept: '#draggable',
  drop: function(event, ui) {
    $(this).append(ui.draggable);
  },
});
$("#draggable").draggable();

示例2：带有回调函数的拖放

下面的示例代码演示了如何在拖放完成后执行的回调函数中获取拖动元素的属性值。

<div id="droppable-2">可以拖入的区域</div>
<div id="draggable-2">可以拖动的元素</div>

$("#droppable-2").droppable({
  drop: function(event, ui) {
    alert("拖放完成！拖动元素的 ID 是：" + ui.draggable.attr('id'));
  },
});
$("#draggable-2").draggable();

以上就是 “jQuery UI Droppable widget() 方法” 的详细攻略，希望能够帮助你更好的理解这个方法的用途。

Tags: