Latest web development tutorials

의 jQuery UI API는 - 작은 부품을 배치 할 수 있습니다 (낙하 할 위젯)

범주

인터랙티브 (상호 작용)

용법

설명 : 드래그 위젯을 드롭 할 수있는 대상을 생성합니다.

새 버전 : 1.0

의존 :

참고 : jQuery를 UI가 배치 될 수있다 (낙하 할) 플러그인이 선택 가능 요소를 배치 할 수 있습니다 (그들은 드래그를 접수 한 후 배치됩니다 의미). 개별적으로 받아 들일 것 드래그를 지정할 수 있습니다.

빠른 탐색

选项 方法 事件
out

选项 类型 描述 默认值
accept Selector 或 Function() 控制哪个可拖拽（draggable）元素可被 droppable 接受。

支持多个类型：

  • Selector ：一个选择器，指定哪个可拖拽（draggable）元素可被 droppable 接受。
  • Function() ：一个函数，将被页面上每个 draggable 调用（作为第一个参数传递给函数）。如果 draggable 被接受，该函数必须返回 true 。

代码实例：

初始化带有指定 accept 选项的 droppable：

$( ".selector" ).droppable({ accept: ".special" });

在初始化后，获取或设置 accept 选项：

// getter
var accept = $( ".selector" ).droppable( "option", "accept" );
 
// setter
$( ".selector" ).droppable( "option", "accept", ".special" );
"*"
activeClass String 如果指定了该选项，当一个可接受的 draggable 被拖拽时，class 将被添加到 droppable。

代码实例：

初始化带有指定 activeClass 选项的 droppable：

$( ".selector" ).droppable({ activeClass: "ui-state-highlight" });

在初始化后，获取或设置 activeClass 选项：

// getter
var activeClass = $( ".selector" ).droppable( "option", "activeClass" );
 
// setter
$( ".selector" ).droppable( "option", "activeClass", "ui-state-highlight" );
false
addClasses Boolean 如果设置为 false ，将防止 ui-droppable class 被添加。这在数百个元素上调用 .droppable() 时有助于性能优化。

代码实例：

初始化带有指定 addClasses 选项的 droppable：

$( ".selector" ).droppable({ addClasses: false });

在初始化后，获取或设置 addClasses 选项：

// getter
var addClasses = $( ".selector" ).droppable( "option", "addClasses" );
 
// setter
$( ".selector" ).droppable( "option", "addClasses", false );
true
disabled Boolean 如果设置为 true ，则禁用该 droppable。

代码实例：

初始化带有指定 disabled 选项的 droppable：

$( ".selector" ).droppable({ disabled: true });

在初始化后，获取或设置 disabled 选项：

// getter
var disabled = $( ".selector" ).droppable( "option", "disabled" );
 
// setter
$( ".selector" ).droppable( "option", "disabled", true );
false
greedy Boolean 默认情况下，当一个元素被放置在嵌套是 droppable 上时，每个 droppable 将接收该元素。然而，通过设置该选项为 true ，任何父元素的 droppable 将无法接收该元素。 drop 事件仍将照常，但会检查 event.target 以便查看哪个 droppable 接收 draggable 元素。

代码实例：

初始化带有指定 greedy 选项的 droppable：

$( ".selector" ).droppable({ greedy: true });

在初始化后，获取或设置 greedy 选项：

// getter
var greedy = $( ".selector" ).droppable( "option", "greedy" );
 
// setter
$( ".selector" ).droppable( "option", "greedy", true );
false
hoverClass String 如果指定了该选项，当一个可接受 draggable 被覆盖在 droppable 上时，class 将被添加到 droppable。

代码实例：

初始化带有指定 hoverClass 选项的 droppable：

$( ".selector" ).droppable({ hoverClass: "drop-hover" });

在初始化后，获取或设置 hoverClass 选项：

// getter
var hoverClass = $( ".selector" ).droppable( "option", "hoverClass" );
 
// setter
$( ".selector" ).droppable( "option", "hoverClass", "drop-hover" );
false
scope String 用于组合配套 draggable 和 droppable 项，除了 droppable 的 accept 选项之外。一个与 droppable 带有相同的 scope 值的 draggable 会被该 droppable 接受。

代码实例：

初始化带有指定 scope 选项的 droppable：

$( ".selector" ).droppable({ scope: "tasks" });

在初始化后，获取或设置 scope 选项：

// getter
var scope = $( ".selector" ).droppable( "option", "scope" );
 
// setter
$( ".selector" ).droppable( "option", "scope", "tasks" );
"default"
tolerance String 指定用于测试一个 draggable 是否覆盖在一个 droppable 上的模式。可能的值：
  • "fit" ：draggable 完全重叠在 droppable 上。
  • "intersect" ：draggable 重叠在 droppable 上，两个方向上至少 50%。
  • "pointer" ：鼠标指针重叠在 droppable 上。
  • "touch" ：draggable 重叠在 droppable 上，任何数量皆可。

代码实例：

初始化带有指定 tolerance 选项的 droppable：

$( ".selector" ).droppable({ tolerance: "fit" });

在初始化后，获取或设置 tolerance 选项：

// getter
var tolerance = $( ".selector" ).droppable( "option", "tolerance" );
 
// setter
$( ".selector" ).droppable( "option", "tolerance", "fit" );
"intersect"

方法 返回 描述
destroy() jQuery (plugin only) 完全移除 droppable 功能。这会把元素返回到它的预初始化状态。
  • 该方法不接受任何参数。

代码实例：

调用 destroy 方法：

$( ".selector" ).droppable( "destroy" );
disable() jQuery (plugin only) 禁用 droppable。
  • 该方法不接受任何参数。

代码实例：

调用 disable 方法：

$( ".selector" ).droppable( "disable" );
enable() jQuery (plugin only) 启用 droppable。
  • 该方法不接受任何参数。

代码实例：

调用 enable 方法：

$( ".selector" ).droppable( "enable" );
option( optionName ) Object 获取当前与指定的 optionName 关联的值。
  • optionName
    类型：String
    描述：要获取的选项的名称。

代码实例：

调用该方法：

var isDisabled = $( ".selector" ).droppable( "option", "disabled" );
option() PlainObject 获取一个包含键/值对的对象，键/值对表示当前 droppable 选项哈希。
  • 该方法不接受任何参数。

代码实例：

调用该方法：

var options = $( ".selector" ).droppable( "option" );
option( optionName, value ) jQuery (plugin only) 设置与指定的 optionName 关联的 droppable 选项的值。
  • optionName
    类型：String
    描述：要设置的选项的名称。
  • value
    类型：Object
    描述：要为选项设置的值。

代码实例：

调用该方法：

$( ".selector" ).droppable( "option", "disabled", true );
option( options ) jQuery (plugin only) 为 droppable 设置一个或多个选项。
  • options
    类型：Object
    描述：要设置的 option-value 对。

代码实例：

调用该方法：

$( ".selector" ).droppable( "option", { disabled: true } );
widget() jQuery 返回一个包含 droppable 元素的 jQuery 对象。
  • 该方法不接受任何参数。

代码实例：

调用 widget 方法：

var widget = $( ".selector" ).droppable( "widget" );

事件 类型 描述
activate( event, ui ) dropactivate 当一个可接受的 draggable 开始拖拽时触发。如果您想让 droppable 被放置时"点亮"，该选项就可以派上用场。
  • event
    类型：Event
  • ui
    类型：Object
    • draggable
      类型：jQuery
      描述：jQuery 对象，表示 draggable 元素。
    • helper
      类型：jQuery
      描述：jQuery 对象，表示被拖拽的助手（helper）。
    • position
      类型：Object
      描述：draggable 助手（helper）的当前 CSS 位置，比如 { top, left } 对象。
    • offset
      类型：Object
      描述：draggable 助手（helper）的当前偏移位置，比如 { top, left } 对象。

代码实例：

初始化带有指定 activate 回调的 droppable：

$( ".selector" ).droppable({
  activate: function( event, ui ) {}
});

绑定一个事件监听器到 dropactivate 事件：

$( ".selector" ).on( "dropactivate", function( event, ui ) {} );
create( event, ui ) dropcreate 当 droppable 被创建时触发。
  • event
    类型：Event
  • ui
    类型：Object

注意： ui 对象是空的，这里包含它是为了与其他事件保持一致性。

代码实例：

初始化带有指定 create 回调的 droppable：

$( ".selector" ).droppable({
  create: function( event, ui ) {}
});

绑定一个事件监听器到 dropcreate 事件：

$( ".selector" ).on( "dropcreate", function( event, ui ) {} );
deactivate( event, ui ) dropdeactivate 当一个可接受的 draggable 停止拖拽时触发。
  • event
    类型：Event
  • ui
    类型：Object
    • draggable
      类型：jQuery
      描述：jQuery 对象，表示 draggable 元素。
    • helper
      类型：jQuery
      描述：jQuery 对象，表示被拖拽的助手（helper）。
    • position
      类型：Object
      描述：draggable 助手（helper）的当前 CSS 位置，比如 { top, left } 对象。
    • offset
      类型：Object
      描述：draggable 助手（helper）的当前偏移位置，比如 { top, left } 对象。

代码实例：

初始化带有指定 deactivate 回调的 droppable：

$( ".selector" ).droppable({
  deactivate: function( event, ui ) {}
});

绑定一个事件监听器到 dropdeactivate 事件：

$( ".selector" ).on( "dropdeactivate", function( event, ui ) {} );
drop( event, ui ) drop 当一个可接受的 draggable 被放置在 droppable（基于 tolerance 选项）上时触发。
  • event
    类型：Event
  • ui
    类型：Object
    • draggable
      类型：jQuery
      描述：jQuery 对象，表示 draggable 元素。
    • helper
      类型：jQuery
      描述：jQuery 对象，表示被拖拽的助手（helper）。
    • position
      类型：Object
      描述：draggable 助手（helper）的当前 CSS 位置，比如 { top, left } 对象。
    • offset
      类型：Object
      描述：draggable 助手（helper）的当前偏移位置，比如 { top, left } 对象。

代码实例：

初始化带有指定 drop 回调的 droppable：

$( ".selector" ).droppable({
  drop: function( event, ui ) {}
});

绑定一个事件监听器到 drop 事件：

$( ".selector" ).on( "drop", function( event, ui ) {} );
out( event, ui ) dropout 当 droppable 被拖拽出 droppable（基于 tolerance 选项）时触发。
  • event
    类型：Event
  • ui
    类型：Object

注意： ui 对象是空的，这里包含它是为了与其他事件保持一致性。

代码实例：

初始化带有指定 out 回调的 droppable：

$( ".selector" ).droppable({
  out: function( event, ui ) {}
});

绑定一个事件监听器到 dropout 事件：

$( ".selector" ).on( "dropout", function( event, ui ) {} );
over( event, ui ) dropover 当一个可接受的 draggable 被拖拽在 droppable（基于 tolerance 选项）上时触发。
  • event
    类型：Event
  • ui
    类型：Object
    • draggable
      类型：jQuery
      描述：jQuery 对象，表示 draggable 元素。
    • helper
      类型：jQuery
      描述：jQuery 对象，表示被拖拽的助手（helper）。
    • position
      类型：Object
      描述：draggable 助手（helper）的当前 CSS 位置，比如 { top, left } 对象。
    • offset
      类型：Object
      描述：draggable 助手（helper）的当前偏移位置，比如 { top, left } 对象。

代码实例：

初始化带有指定 over 回调的 droppable：

$( ".selector" ).droppable({
  over: function( event, ui ) {}
});

绑定一个事件监听器到 dropover 事件：

$( ".selector" ).on( "dropover", function( event, ui ) {} );

예

한 쌍 드래그 및 낙하 할 요소입니다. 

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목> 배치 할 수있는 작은 부품 (낙하 할 위젯) 데모 </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스타일>
  #draggable {
    폭 : 100 픽셀;
    높이 : 100 픽셀;
    배경 : #ccc;
  }
  #droppable {
    위치 : 절대;
    왼쪽 : 250 픽셀;
    상단 : 0;
    폭 : 125px;
    높이 : 125px;
    배경 : # 999;
    색상 : #fff;
    패딩 : 10px;
  }
  </ 스타일>
  <스크립트 SRC = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ 헤드>
<바디>
 
<사업부 아이디 = "낙하 할"> 여기에 계속! </ DIV>
<사업부 아이디 = "드래그"> 나를 끌어주세요! </ DIV>
 
<스크립트>
$ ( "#draggable") .draggable ();
{(.droppable $ ( "#droppable")
  드롭 : 함수 () {
    경보 ( "삭제");
  }
});
</ 스크립트>
 
</ BODY>
</ HTML>