减小字体
增大字体- ·上一篇文章：jQuery UI 实例 - 拖动（Draggable）
- ·下一篇文章：jQuery UI 实例 - 缩放（Resizable）
当前位置：K88软件开发 → 文章中心 → 编程语言 → JavaScript → JS02 → 文章内容
jQuery UI 实例 - 放置（Droppable）
jQuery UI 实例 - 放置（Droppable）为可拖拽小部件创建目标。如需了解更多有关 droppable 交互的细节，请查看 API 文档 可放置小部件（Droppable Widget）。默认功能在任意的 DOM 元素上启用 droppable 功能，并为可拖拽小部件创建目标。<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 放置（Droppable） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http:
//jqueryui.com/resources/demos/style.css"> <style>
#draggable { width:
100px; height:
100px; padding:
0.5em; float:
left; margin:
10px 10px 10px 0; }
#droppable { width:
150px; height:
150px; padding:
0.5em; float:
left; margin:
10px; } </style> <script> $(function() { $( "
#draggable" ).draggable(); $( "
#droppable" ).droppable({ drop:
function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); }); </script></head><body> <div id="draggable" class="ui-widget-content"> <p>请把我拖拽到目标处！</p></div> <div id="droppable" class="ui-widget-header"> <p>请放置在这里！</p></div> </body></html>查看演示接受使用 accept 选项指定目标 droppable 接受哪一个元素（或元素组）。<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 放置（Droppable） - 接受</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http:
//jqueryui.com/resources/demos/style.css"> <style>
#droppable { width:
150px; height:
150px; padding:
0.5em; float:
left; margin:
10px; }
#draggable,
#draggable-nonvalid { width:
100px; height:
100px; padding:
0.5em; float:
left; margin:
10px 10px 10px 0; } </style> <script> $(function() { $( "
#draggable,
#draggable-nonvalid" ).draggable(); $( "
#droppable" ).droppable({ accept:
"
#draggable", activeClass:
"ui-state-hover", hoverClass:
"ui-state-active", drop:
function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); }); </script></head><body> <div id="draggable-nonvalid" class="ui-widget-content"> <p>我是不能被放置的 draggable</p></div> <div id="draggable" class="ui-widget-content"> <p>请拖拽我到目标</p></div> <div id="droppable" class="ui-widget-header"> <p>accept:
'
#draggable'</p></div> </body></html>查看演示防止传播当使用嵌套的 droppable 时 — 例如，您可以有一个树形的可编辑的目录结构，带有文件夹和文档节点 — greedy 选项设置为 true 来防止当 draggable 被放置在子节点（droppable）上时的事件传播。<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 放置（Droppable） - 防止传播</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http:
//jqueryui.com/resources/demos/style.css"> <style>
#draggable { width:
100px; height:
40px; padding:
0.5em; float:
left; margin:
10px 10px 10px 0; }
#droppable,
#droppable2 { width:
230px; height:
120px; padding:
0.5em; float:
left; margin:
10px; }
#droppable-inner,
#droppable2-inner { width:
170px; height:
60px; padding:
0.5em; float:
left; margin:
10px; } </style> <script> $(function() { $( "
#draggable" ).draggable(); $( "
#droppable,
#droppable-inner" ).droppable({ activeClass:
"ui-state-hover", hoverClass:
"ui-state-active", drop:
function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "> p" ) .html( "Dropped!" ); return false; } }); $( "
#droppable2,
#droppable2-inner" ).droppable({ greedy:
true, activeClass:
"ui-state-hover", hoverClass:
"ui-state-active", drop:
function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "> p" ) .html( "Dropped!" ); } }); }); </script></head><body> <div id="draggable" class="ui-widget-content"> <p>请拖拽我到目标</p></div> <div id="droppable" class="ui-widget-header"> <p>外部 droppable</p> <div id="droppable-inner" class="ui-widget-header"> <p>内部 droppable（不带有 greedy）</p> </div></div> <div id="droppable2" class="ui-widget-header"> <p>外部 droppable</p> <div id="droppable2-inner" class="ui-widget-header"> <p>内部 droppable（带有 greedy）</p> </div></div> </body></html>查看演示还原 draggable 的位置当带有布尔值 revert 选项的 draggable 停止拖拽时，返回 draggable（或它的助手）到原始位置。<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 放置（Droppable） - 还原 draggable 的位置</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jqu
//jqueryui.com/resources/demos/style.css"> <style>
#draggable { width:
100px; height:
100px; padding:
0.5em; float:
left; margin:
10px 10px 10px 0; }
#droppable { width:
150px; height:
150px; padding:
0.5em; float:
left; margin:
10px; } </style> <script> $(function() { $( "
#draggable" ).draggable(); $( "
#droppable" ).droppable({ drop:
function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); }); </script></head><body> <div id="draggable" class="ui-widget-content"> <p>请把我拖拽到目标处！</p></div> <div id="droppable" class="ui-widget-header"> <p>请放置在这里！</p></div> </body></html>查看演示接受使用 accept 选项指定目标 droppable 接受哪一个元素（或元素组）。<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 放置（Droppable） - 接受</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http:
//jqueryui.com/resources/demos/style.css"> <style>
#droppable { width:
150px; height:
150px; padding:
0.5em; float:
left; margin:
10px; }
#draggable,
#draggable-nonvalid { width:
100px; height:
100px; padding:
0.5em; float:
left; margin:
10px 10px 10px 0; } </style> <script> $(function() { $( "
#draggable,
#draggable-nonvalid" ).draggable(); $( "
#droppable" ).droppable({ accept:
"
#draggable", activeClass:
"ui-state-hover", hoverClass:
"ui-state-active", drop:
function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); }); </script></head><body> <div id="draggable-nonvalid" class="ui-widget-content"> <p>我是不能被放置的 draggable</p></div> <div id="draggable" class="ui-widget-content"> <p>请拖拽我到目标</p></div> <div id="droppable" class="ui-widget-header"> <p>accept:
'
#draggable'</p></div> </body></html>查看演示防止传播当使用嵌套的 droppable 时 — 例如，您可以有一个树形的可编辑的目录结构，带有文件夹和文档节点 — greedy 选项设置为 true 来防止当 draggable 被放置在子节点（droppable）上时的事件传播。<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 放置（Droppable） - 防止传播</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http:
//jqueryui.com/resources/demos/style.css"> <style>
#draggable { width:
100px; height:
40px; padding:
0.5em; float:
left; margin:
10px 10px 10px 0; }
#droppable,
#droppable2 { width:
230px; height:
120px; padding:
0.5em; float:
left; margin:
10px; }
#droppable-inner,
#droppable2-inner { width:
170px; height:
60px; padding:
0.5em; float:
left; margin:
10px; } </style> <script> $(function() { $( "
#draggable" ).draggable(); $( "
#droppable,
#droppable-inner" ).droppable({ activeClass:
"ui-state-hover", hoverClass:
"ui-state-active", drop:
function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "> p" ) .html( "Dropped!" ); return false; } }); $( "
#droppable2,
#droppable2-inner" ).droppable({ greedy:
true, activeClass:
"ui-state-hover", hoverClass:
"ui-state-active", drop:
function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "> p" ) .html( "Dropped!" ); } }); }); </script></head><body> <div id="draggable" class="ui-widget-content"> <p>请拖拽我到目标</p></div> <div id="droppable" class="ui-widget-header"> <p>外部 droppable</p> <div id="droppable-inner" class="ui-widget-header"> <p>内部 droppable（不带有 greedy）</p> </div></div> <div id="droppable2" class="ui-widget-header"> <p>外部 droppable</p> <div id="droppable2-inner" class="ui-widget-header"> <p>内部 droppable（带有 greedy）</p> </div></div> </body></html>查看演示还原 draggable 的位置当带有布尔值 revert 选项的 draggable 停止拖拽时，返回 draggable（或它的助手）到原始位置。<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 放置（Droppable） - 还原 draggable 的位置</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jqu
jQuery UI 实例 - 放置（Droppable）
