本文概述

• 第一种方法
• jQuery UI Droppable()方法示例1
• jQuery UI Droppable()方法示例2
• jQuery UI Droppable()方法示例3
• jQuery UI Droppable()方法示例4
• 第二种方法
• jQuery UI Droppable()方法示例5
• jQuery UI Droppable()方法示例6

jQuery UI方便你使用droppable()方法使任何DOM元素可拖放到指定目标。
句法：
你可以两种形式使用droppable()方法：

1. $(selector, context).droppable (options) Method

2. $(selector, context).droppable ("action", params) Method

第一种方法droppable（选项）方法指定你可以将HTML元素用作可以放置其他元素的元素。在这里, option参数指定了所涉及元素的行为。
句法：

$(selector, context).droppable (options);

你可以使用JavaScript对象一次使用一个或多个选项。如果你使用多个选项, 则必须使用逗号将它们分开。例如：

$(selector, context).droppable({option1: value1, option2: value2..... });

以下是可与该方法一起使用的不同选项的列表：

选项	描述
accept	需要控制放置哪些可拖动元素时, 可以使用此选项。默认情况下, 其值为*。
activeclass	此选项是一个字符串, 表示当拖动一个接受的元素（options.accept中指示的元素之一）时要添加到droppable元素的一个或多个css类。默认情况下, 其值为false。
addclasses	将此选项设置为false时, 将防止将ui-droppable类添加到droppable元素中。默认情况下, 其值为true。
diasabled	将此选项设置为true时, 将禁用可放置性。默认情况下, 其值为false。
greedy	当你需要控制将哪些可拖动元素放置在嵌套可放置对象上时, 可以使用此选项。默认情况下, 其值为false。如果将此选项设置为true, 则任何父代可放置对象都不会接收该元素。
hoverclass	此选项是一个字符串, 表示当一个接受的元素（options.accept中指示的元素）移入droppable元素时要添加到该元素的一个或多个css类。默认情况下, 其值为false。
scope	此选项用于将可拖动元素的可拖放动作仅限制为具有相同options.scope（在draggable（选项）中定义）的项目。默认情况下, 其值为“默认”。
tolerence	此选项是一个字符串, 用于指定用于测试可拖动对象是否悬停在可放置对象上的模式。默认情况下, 其值为“相交”。

jQuery UI Droppable()方法示例1让我们以一个示例来演示不带参数的jQuery UI Droppable()方法。

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI Droppable - Default functionality< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/004Z01137-0.jpg"> < /script> < script src="http://img.readke.com/220430/004Z042Q-1.jpg"> < /script> < style> #draggable-1 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 22px 5px 10px 0; } #droppable-1 { width: 150px; height: 120px; padding: 0.5em; float: left; margin: 10px; } < /style> < script> $(function() { $( "#draggable-1" ).draggable(); $( "#droppable-1" ).droppable(); }); < /script> < /head> < body> < div id="draggable-1" class="ui-widget-content"> < p> I am SSSIT.org< br/> Drag me to srcmini< /p> < /div> < div id="droppable-1" class="ui-widget-header"> < p> Welcome to srcmini< /p> < /div> < /body> < /html>

立即测试
jQuery UI Droppable()方法示例2b）如何使用addClass, disabled和tolerance：
下面的示例指定如何在jQuery UI的drop函数中使用这三个选项addClass, disable和tolerance。

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI Droppable - Default functionality< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/004Z01137-0.jpg"> < /script> < script src="http://img.readke.com/220430/004Z042Q-1.jpg"> < /script> < style> #draggable-2 { width: 100px; height: 50px; padding: 0.5em; margin: 0px 5px 10px 0; } #droppable-2, #droppable-3, #droppable-4, #droppable-5 { width: 120px; height: 90px; padding: 0.5em; float: left; margin: 10px; }< /style> < script> $(function() { $( "#draggable-2" ).draggable(); $( "#droppable-2" ).droppable({ drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); $( "#droppable-3" ).droppable({ disabled : "true", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); $( "#droppable-4" ).droppable({ tolerance: 'touch', drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped with a touch!" ); } }); $( "#droppable-5" ).droppable({ tolerance: 'fit', drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped only when fully fit on the me!" ); } }); }); < /script> < /head> < body> < div id="draggable-2" class="ui-widget-content"> < p> Drag me to my target< /p> < /div> < div id="droppable-2" class="ui-widget-header"> < p> Drop here< /p> < /div> < div id="droppable-3" class="ui-widget-header"> < p> I'm disabled, you can't drop here!< /p> < /div> < div id="droppable-4" class="ui-widget-header"> < p> Tolerance Touch!< br/> Drop to touch the boundary.< /p> < /div> < div id="droppable-5" class="ui-widget-header"> < p> Tolerance Fit!< br/> Drop within the box.< /p> < /div> < /body> < /html>

立即测试
jQuery UI Droppable()方法示例3c）如何选择要删除的元素：
下面的示例指定如何在jQuery UI的拖动功能中使用accept和scope选项：

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI Droppable - Default functionality< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/004Z01137-0.jpg"> < /script> < script src="http://img.readke.com/220430/004Z042Q-1.jpg"> < /script> < style> .wrap{ display: table-row-group; } #sqltutorial, #htmltutorial, #javatutorial, #springtutorial { width: 120px; height: 70px; padding: 0.5em; float: left; margin: 0px 5px 10px 0; }#sql, #html, #java, #spring { width: 140px; height: 100px; padding: 0.5em; float: left; margin: 10px; }< /style> < script> $(function() { $( "#sqltutorial" ).draggable(); $( "#htmltutorial" ).draggable(); $( "#sql" ).droppable({ accept: "#sqltutorial", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); $( "#html" ).droppable({ accept: "#htmltutorial", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); $( "#javatutorial" ).draggable({scope : "java"}); $( "#springtutorial" ).draggable({scope : "spring"}); $( "#java" ).droppable({ scope: "java", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); $( "#spring" ).droppable({ scope: "spring", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); }); < /script> < /head> < body> < div class="wrap" > < div id="sqltutorial" class="ui-widget-content"> < p> Students who want to learn < strong> SQL< /strong> < /p> < /div> < div id="htmltutorial" class="ui-widget-content"> < p> Students who want to learn < strong> HTML< /strong> < /p> < /div> < div id="sql" class="ui-widget-header"> < p> SQL< /p> < /div> < div id="html" class="ui-widget-header"> < p> HTML< /p> < /div> < /div> < hr/> < div class="wrap" > < div id="javatutorial" class="ui-widget-content"> < p> Students who want to learn < strong> Java< /strong> < /p> < /div> < div id="springtutorial" class="ui-widget-content"> < p> Students who want to learn < strong> Spring< /strong> < /p> < /div> < div id="java" class="ui-widget-header"> < p> Java< /p> < /div> < div id="spring" class="ui-widget-header"> < p> Spring< /p> < /div> < /div> < /body> < /html>

立即测试
jQuery UI Droppable()方法示例4d）如何使用activeClass和hoverClass：

jQuery UI的activeClass和hoverClass选项用于管理外观。让我们以一个例子来演示这种效果：

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI Droppable - Default functionality< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/004Z01137-0.jpg"> < /script> < script src="http://img.readke.com/220430/004Z042Q-1.jpg"> < /script> < style type="text/css"> #draggable-3 { width: 100px; height: 50px; padding: 0.5em; float: left; margin: 21px 5px 10px 0; } #droppable-6 { width: 120px; height: 90px; padding: 0.5em; float: left; margin: 10px; } .active { border-color : red; background : pink; } .hover { border-color : black; background : lightgreen; } < /style> < script> $(function() { $( "#draggable-3" ).draggable(); $( "#droppable-6" ).droppable({ activeClass: "active", hoverClass:"hover", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); }); < /script> < /head> < body> < div id="draggable-3" class="ui-widget-content"> < p> Drag me to my target< /p> < /div> < div id="droppable-6" class="ui-widget-header"> < p> Hover at me or Drop here< /p> < /div> < /body> < /html>

立即测试
第二种方法可放置（“动作”, 参数）方法用于对可放置元素执行操作, 例如防止可放置功能。你必须在第一个参数中传递指定为字符串的操作。即“禁用”以防止掉线。
句法：

$(selector, context).droppable ("action", params);

以下是可用于此方法的操作列表：

行动	描述
accept	需要控制放置哪些可拖动元素时, 可以使用此选项。默认情况下, 其值为*。
activeclass	此选项是一个字符串, 表示当拖动一个接受的元素（options.accept中指示的元素之一）时要添加到droppable元素的一个或多个css类。默认情况下, 其值为false。
addclasses	当设置为false时, 此选项将防止将ui-droppable类添加到droppable元素中。默认情况下, 其值为true。
disabled	当设置为true时, 此选项禁用可放置。默认情况下, 其值为false。
greedy	当你需要控制将哪些可拖动元素放置在嵌套可放置对象上时, 可以使用此选项。默认情况下, 其值为false。如果将此选项设置为true, 则任何父代可放置对象都不会接收该元素。
hoverclass	此选项是一个字符串, 表示当一个接受的元素（options.accept中指示的元素）移入droppable元素时要添加到该元素的一个或多个css类。默认情况下, 其值为false。
scope	此选项用于将可拖动元素的可拖放动作仅限制为具有相同options.scope（在draggable（选项）中定义）的项目。默认情况下, 其值为“默认”。
tolerence	此选项是一个字符串, 用于指定用于测试可拖动对象是否悬停在可放置对象上的模式。默认情况下, 其值为“相交”。

jQuery UI Droppable()方法示例5让我们以一个示例来演示destroy()方法的用法：

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI Droppable - Default functionality< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/004Z01137-0.jpg"> < /script> < script src="http://img.readke.com/220430/004Z042Q-1.jpg"> < /script> < style> .draggable-4 { width: 90px; height: 50px; padding: 0.5em; float: left; margin: 0px 5px 10px 0; border: 1px solid red; background-color:#B9CD6D; } .droppable-7 { width: 100px; height: 90px; padding: 0.5em; float: left; margin: 10px; border: 1px solid black; background-color:#A39480; } .droppable.active { background-color: red; } < /style> < script> $(function() { $('.draggable-4').draggable({ revert: true }); $('.droppable-7').droppable({ hoverClass: 'active', drop: function(e, ui) { $(this).html(ui.draggable.remove().html()); $(this).droppable('destroy'); $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "i'm destroyed!" ); } }); }); < /script> < /head> < body> < div class="draggable-4"> < p> drag 1< /p> < /div> < div class="draggable-4"> < p> drag 2< /p> < /div> < div class="draggable-4"> < p> drag 3< /p> < /div> < div style="clear: both; padding:10px"> < /div> < div class="droppable-7"> drop here< /div> < div class="droppable-7"> drop here< /div> < div class="droppable-7"> drop here< /div> < /body> < /html>

立即测试
jQueryUI中有一些事件方法会针对特定事件触发。以下是一些事件方法。

事件方法	描述
activate(event, ui)	当接受的可拖动元素开始拖动时触发此事件。如果你希望在放置可放置的对象时使其“点亮”, 这将很有用。
create(event, ui)	创建可放置元素时触发此事件。 ？哪里？事件是事件类型, “ ui”是对象类型。
deactivate(event, ui)	当可接受的可拖动对象停止拖动时将触发此事件。 “ Where”事件是事件类型, 而ui是对象类型。
drop(event, ui)	当元素放置在可放置对象上时触发此动作。这基于公差选项。 “ Where”事件是事件类型, 而“ ui”是对象类型。
out(event, ui)	当将可接受的可拖动元素拖出可放置对象时, 将触发此事件。这基于公差选项。 ？哪里？事件是事件类型, “ ui”是对象类型。
over(event, ui)	当将可接受的可拖动元素拖动到可放置对象上时, 将触发此事件。这基于公差选项。 “ Where”事件是事件类型, 而“ ui”是对象类型。

jQuery UI Droppable()方法示例6让我们以一个示例来演示拖放功能期间的“ drop”, “ over”和“ out”事件。

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI Droppable - Default functionality< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/004Z01137-0.jpg"> < /script> < script src="http://img.readke.com/220430/004Z042Q-1.jpg"> < /script> < style> #draggable-5 { width: 100px; height: 50px; padding: 0.5em; float: left; margin: 22px 5px 10px 0; } #droppable-8 { width: 120px; height: 90px; padding: 0.5em; float: left; margin: 10px; } < /style> < script> $(function() { $( "#draggable-5" ).draggable(); $("#droppable-8").droppable({ drop: function (event, ui) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); }, over: function (event, ui) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "moving in!" ); }, out: function (event, ui) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "moving out!" ); } }); }); < /script> < /head> < body> < div id="draggable-5" class="ui-widget-content"> < p> Drag me to my target< /p> < /div> < div id="droppable-8" class="ui-widget-header"> < p> I am the target. < /p> < /div> < /body> < /html>

【jQuery UI Droppable】立即测试

推荐阅读

• 

  医院病假条怎么写范本 医院病假条怎么写
• 

  静脉曲张晚期有哪些罕见症状 静脉曲张初期症状
• 

  叶插多肉小苗怎么护理 叶插多肉小苗怎么养护
• 

  包皮手术后系带处水肿的危害
• 

  r 情感分析结果,金牛座情感分析
• 

  肆月肆號
• 

  有心脏病的人可以食用食用油吗？
• 

  360奇酷手机屏幕失灵怎么修 360手机屏幕失灵怎么办
• 

  捷克、斯洛伐克、匈牙利和波兰等东欧国家民族成分是不是很单一？
• 

  c网投诉分析系统
• 

  嘴唇改薄手术过程
• 

  卫衣面料有哪些种类视频 卫衣面料有哪些种类
• 

  从历史上讲,吴定都苏州不到二十年又回到越国,在越长期统治下说的不是越语吗？
• 

  4396是什么梗 4396是指什么梗
• 

  猫咪下颚有小疙瘩
• 

  亲子日记第39篇（2018年3月6日，星期二，天气（多云转晴）（妈妈篇））
• 

  运动场地面用什么材料
• 

  顺嫔为什么害魏璎珞
• 

  摄影造型法则 造型手法摄影
• 

  健康码是黄码不能出门吗

• jQuery UI缓和
• jQuery UI可拖动
• jQuery UI对话框
• jQuery UI日期选择器
• jQuery UI按钮
• jQuery UI自动完成
• jQuery UI颜色动画
• jQuery UI addClass
• jQuery UI Accordion