减小字体
增大字体- ·上一篇文章：jQuery UI 实例 - 拖动（Draggable）
- ·下一篇文章：jQuery UI 实例 - 缩放（Resizable）
当前位置：K88软件开发 → 文章中心 → 编程语言 → JavaScript → JS02 → 文章内容
jQuery UI 实例 - 放置（Droppable）
ry.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http:
//jqueryui.com/resources/demos/style.css"> <style>
#draggable,
#draggable2 { width:
90px; height:
90px; padding:
0.5em; float:
left; margin:
10px 10px 10px 0; }
#droppable,
#droppable2 { width:
120px; height:
120px; padding:
0.5em; float:
left; margin:
10px; } h3 { clear:
left; } </style> <script> $(function() { $( "
#draggable" ).draggable(); $( "
#droppable" ).droppable({ hoverClass:
"ui-state-hover", drop:
function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); $( "
#draggable2" ).draggable(); $( "
#droppable2" ).droppable({ accept:
"
#draggable2", activeClass:
"ui-state-default", drop:
function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); }); </script></head><body> <h3>当悬停在 droppable 上时的反馈：</h3> <div id="draggable" class="ui-widget-content"> <p>请拖拽我到目标</p></div> <div id="droppable" class="ui-widget-header"> <p>请放置在这里</p></div> <h3>当激活 draggable 时的反馈：</h3> <div id="draggable2" class="ui-widget-content"> <p>请拖拽我到目标</p></div> <div id="droppable2" class="ui-widget-header"> <p>请放置在这里</p></div> </body></html>查看演示
//jqueryui.com/resources/demos/style.css"> <style>
#draggable,
#draggable2 { width:
90px; height:
90px; padding:
0.5em; float:
left; margin:
10px 10px 10px 0; }
#droppable,
#droppable2 { width:
120px; height:
120px; padding:
0.5em; float:
left; margin:
10px; } h3 { clear:
left; } </style> <script> $(function() { $( "
#draggable" ).draggable(); $( "
#droppable" ).droppable({ hoverClass:
"ui-state-hover", drop:
function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); $( "
#draggable2" ).draggable(); $( "
#droppable2" ).droppable({ accept:
"
#draggable2", activeClass:
"ui-state-default", drop:
function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); }); </script></head><body> <h3>当悬停在 droppable 上时的反馈：</h3> <div id="draggable" class="ui-widget-content"> <p>请拖拽我到目标</p></div> <div id="droppable" class="ui-widget-header"> <p>请放置在这里</p></div> <h3>当激活 draggable 时的反馈：</h3> <div id="draggable2" class="ui-widget-content"> <p>请拖拽我到目标</p></div> <div id="droppable2" class="ui-widget-header"> <p>请放置在这里</p></div> </body></html>查看演示
jQuery UI 实例 - 放置（Droppable）
