首页 » jQuery UI » jQuery UI 实例
网站地图

放置（Droppable）

jQuery UI 实例 - 放置（Droppable）

为可拖拽小部件创建目标。

如需了解更多有关 droppable 交互的细节，请查看 API 文档 可放置小部件（Droppable Widget）。

默认功能

在任意的 DOM 元素上启用 droppable 功能，并为可拖拽小部件创建目标。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 放置（Droppable） - 默认功能</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  10.   <style>
  11.   #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  12.   #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
  13.   </style>
  14.   <script>
  15.   $(function() {
  16.     $( "#draggable" ).draggable();
  17.     $( "#droppable" ).droppable({
  18.       drop: function( event, ui ) {
  19.         $( this )
  20.           .addClass( "ui-state-highlight" )
  21.           .find( "p" )
  22.             .html( "Dropped!" );
  23.       }
  24.     });
  25.   });
  26.   </script>
  27. </head>
  28. <body>
  29.  
  30. <div id="draggable" class="ui-widget-content">
  31.   <p>请把我拖拽到目标处！</p>
  32. </div>
  33.  
  34. <div id="droppable" class="ui-widget-header">
  35.   <p>请放置在这里！</p>
  36. </div>
  37.  
  38.  
  39. </body>
  40. </html>


接受

使用 accept 选项指定目标 droppable 接受哪一个元素（或元素组）。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 放置（Droppable） - 接受</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  10.   <style>
  11.   #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
  12.   #draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  13.   </style>
  14.   <script>
  15.   $(function() {
  16.     $( "#draggable, #draggable-nonvalid" ).draggable();
  17.     $( "#droppable" ).droppable({
  18.       accept: "#draggable",
  19.       activeClass: "ui-state-hover",
  20.       hoverClass: "ui-state-active",
  21.       drop: function( event, ui ) {
  22.         $( this )
  23.           .addClass( "ui-state-highlight" )
  24.           .find( "p" )
  25.             .html( "Dropped!" );
  26.       }
  27.     });
  28.   });
  29.   </script>
  30. </head>
  31. <body>
  32.  
  33. <div id="draggable-nonvalid" class="ui-widget-content">
  34.   <p>我是不能被放置的 draggable</p>
  35. </div>
  36.  
  37. <div id="draggable" class="ui-widget-content">
  38.   <p>请拖拽我到目标</p>
  39. </div>
  40.  
  41. <div id="droppable" class="ui-widget-header">
  42.   <p>accept: '#draggable'</p>
  43. </div>
  44.  
  45.  
  46. </body>
  47. </html>


防止传播

当使用嵌套的 droppable 时 — 例如，您可以有一个树形的可编辑的目录结构，带有文件夹和文档节点 — greedy 选项设置为 true 来防止当 draggable 被放置在子节点（droppable）上时的事件传播。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 放置（Droppable） - 防止传播</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  10.   <style>
  11.   #draggable { width: 100px; height: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  12.   #droppable, #droppable2 { width: 230px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
  13.   #droppable-inner, #droppable2-inner { width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px; }
  14.   </style>
  15.   <script>
  16.   $(function() {
  17.     $( "#draggable" ).draggable();
  18.  
  19.     $( "#droppable, #droppable-inner" ).droppable({
  20.       activeClass: "ui-state-hover",
  21.       hoverClass: "ui-state-active",
  22.       drop: function( event, ui ) {
  23.         $( this )
  24.           .addClass( "ui-state-highlight" )
  25.           .find( "> p" )
  26.             .html( "Dropped!" );
  27.         return false;
  28.       }
  29.     });
  30.  
  31.     $( "#droppable2, #droppable2-inner" ).droppable({
  32.       greedy: true,
  33.       activeClass: "ui-state-hover",
  34.       hoverClass: "ui-state-active",
  35.       drop: function( event, ui ) {
  36.         $( this )
  37.           .addClass( "ui-state-highlight" )
  38.           .find( "> p" )
  39.             .html( "Dropped!" );
  40.       }
  41.     });
  42.   });
  43.   </script>
  44. </head>
  45. <body>
  46.  
  47. <div id="draggable" class="ui-widget-content">
  48.   <p>请拖拽我到目标</p>
  49. </div>
  50.  
  51. <div id="droppable" class="ui-widget-header">
  52.   <p>外部 droppable</p>
  53.   <div id="droppable-inner" class="ui-widget-header">
  54.     <p>内部 droppable（不带有 greedy）</p>
  55.   </div>
  56. </div>
  57.  
  58. <div id="droppable2" class="ui-widget-header">
  59.   <p>外部 droppable</p>
  60.   <div id="droppable2-inner" class="ui-widget-header">
  61.     <p>内部 droppable（带有 greedy）</p>
  62.   </div>
  63. </div>
  64.  
  65.  
  66. </body>
  67. </html>


还原 draggable 的位置

当带有布尔值 revert 选项的 draggable 停止拖拽时，返回 draggable（或它的助手）到原始位置。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 放置（Droppable） - 还原 draggable 的位置</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  10.   <style>
  11.   #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  12.   #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
  13.   </style>
  14.   <script>
  15.   $(function() {
  16.     $( "#draggable" ).draggable({ revert: "valid" });
  17.     $( "#draggable2" ).draggable({ revert: "invalid" });
  18.  
  19.     $( "#droppable" ).droppable({
  20.       activeClass: "ui-state-default",
  21.       hoverClass: "ui-state-hover",
  22.       drop: function( event, ui ) {
  23.         $( this )
  24.           .addClass( "ui-state-highlight" )
  25.           .find( "p" )
  26.             .html( "已放置！" );
  27.       }
  28.     });
  29.   });
  30.   </script>
  31. </head>
  32. <body>
  33.  
  34. <div id="draggable" class="ui-widget-content">
  35.   <p>当被放置在目标上时还原</p>
  36. </div>
  37.  
  38. <div id="draggable2" class="ui-widget-content">
  39.   <p>当未被放置在目标上时还原</p>
  40. </div>
  41.  
  42. <div id="droppable" class="ui-widget-header">
  43.   <p>请放置在这里</p>
  44. </div>
  45.  
  46.  
  47. </body>
  48. </html>


购物车演示

演示如何使用折叠面板来展示产品的目录结构，使用拖拽和放置来添加产品到购物车，购物车中的产品是可排序的。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 放置（Droppable） - 购物车演示</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  10.   <style>
  11.   h1 { padding: .2em; margin: 0; }
  12.   #products { float:left; width: 500px; margin-right: 2em; }
  13.   #cart { width: 200px; float: left; margin-top: 1em; }
  14.   /* 定义列表样式，以便最大化 droppable */
  15.   #cart ol { margin: 0; padding: 1em 0 1em 3em; }
  16.   </style>
  17.   <script>
  18.   $(function() {
  19.     $( "#catalog" ).accordion();
  20.     $( "#catalog li" ).draggable({
  21.       appendTo: "body",
  22.       helper: "clone"
  23.     });
  24.     $( "#cart ol" ).droppable({
  25.       activeClass: "ui-state-default",
  26.       hoverClass: "ui-state-hover",
  27.       accept: ":not(.ui-sortable-helper)",
  28.       drop: function( event, ui ) {
  29.         $( this ).find( ".placeholder" ).remove();
  30.         $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
  31.       }
  32.     }).sortable({
  33.       items: "li:not(.placeholder)",
  34.       sort: function() {
  35.         // 获取由 droppable 与 sortable 交互而加入的条目
  36.         // 使用 connectWithSortable 可以解决这个问题，但不允许您自定义 active/hoverClass 选项
  37.         $( this ).removeClass( "ui-state-default" );
  38.       }
  39.     });
  40.   });
  41.   </script>
  42. </head>
  43. <body>
  44.  
  45. <div id="products">
  46.   <h1 class="ui-widget-header">产品</h1>
  47.   <div id="catalog">
  48.     <h2><a href="#">T-Shirts</a></h2>
  49.     <div>
  50.       <ul>
  51.         <li>Lolcat Shirt</li>
  52.         <li>Cheezeburger Shirt</li>
  53.         <li>Buckit Shirt</li>
  54.       </ul>
  55.     </div>
  56.     <h2><a href="#">Bags</a></h2>
  57.     <div>
  58.       <ul>
  59.         <li>Zebra Striped</li>
  60.         <li>Black Leather</li>
  61.         <li>Alligator Leather</li>
  62.       </ul>
  63.     </div>
  64.     <h2><a href="#">Gadgets</a></h2>
  65.     <div>
  66.       <ul>
  67.         <li>iPhone</li>
  68.         <li>iPod</li>
  69.         <li>iPad</li>
  70.       </ul>
  71.     </div>
  72.   </div>
  73. </div>
  74.  
  75. <div id="cart">
  76.   <h1 class="ui-widget-header">购物车</h1>
  77.   <div class="ui-widget-content">
  78.     <ol>
  79.       <li class="placeholder">添加产品到这里</li>
  80.     </ol>
  81.   </div>
  82. </div>
  83.  
  84.  
  85. </body>
  86. </html>


简单的照片管理器

您可以通过拖拽照片到回收站或者点击回收站图标来删除照片。

您可以通过拖拽照片到相册或者点击回收利用图标来还原照片。

您可以通过点击缩放图标来查看大图。jQuery UI 对话框（dialog）部件用于模态窗口。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 放置（Droppable） - 简单的照片管理器</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  10.   <style>
  11.   #gallery { float: left; width: 65%; min-height: 12em; }
  12.   .gallery.custom-state-active { background: #eee; }
  13.   .gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
  14.   .gallery li h5 { margin: 0 0 0.4em; cursor: move; }
  15.   .gallery li a { float: right; }
  16.   .gallery li a.ui-icon-zoomin { float: left; }
  17.   .gallery li img { width: 100%; cursor: move; }
  18.  
  19.   #trash { float: right; width: 32%; min-height: 18em; padding: 1%; }
  20.   #trash h4 { line-height: 16px; margin: 0 0 0.4em; }
  21.   #trash h4 .ui-icon { float: left; }
  22.   #trash .gallery h5 { display: none; }
  23.   </style>
  24.   <script>
  25.   $(function() {
  26.     // 这是相册和回收站
  27.     var $gallery = $( "#gallery" ),
  28.       $trash = $( "#trash" );
  29.  
  30.     // 让相册的条目可拖拽
  31.     $( "li", $gallery ).draggable({
  32.       cancel: "a.ui-icon", // 点击一个图标不会启动拖拽
  33.       revert: "invalid", // 当未被放置时，条目会还原回它的初始位置
  34.       containment: "document",
  35.       helper: "clone",
  36.       cursor: "move"
  37.     });
  38.  
  39.     // 让回收站可放置，接受相册的条目
  40.     $trash.droppable({
  41.       accept: "#gallery > li",
  42.       activeClass: "ui-state-highlight",
  43.       drop: function( event, ui ) {
  44.         deleteImage( ui.draggable );
  45.       }
  46.     });
  47.  
  48.     // 让相册可放置，接受回收站的条目
  49.     $gallery.droppable({
  50.       accept: "#trash li",
  51.       activeClass: "custom-state-active",
  52.       drop: function( event, ui ) {
  53.         recycleImage( ui.draggable );
  54.       }
  55.     });
  56.  
  57.     // 图像删除功能
  58.     var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='还原图像' class='ui-icon ui-icon-refresh'>还原图像</a>";
  59.     function deleteImage( $item ) {
  60.       $item.fadeOut(function() {
  61.         var $list = $( "ul", $trash ).length ?
  62.           $( "ul", $trash ) :
  63.           $( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );
  64.  
  65.         $item.find( "a.ui-icon-trash" ).remove();
  66.         $item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
  67.           $item
  68.             .animate({ width: "48px" })
  69.             .find( "img" )
  70.               .animate({ height: "36px" });
  71.         });
  72.       });
  73.     }
  74.  
  75.     // 图像还原功能
  76.     var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='删除图像' class='ui-icon ui-icon-trash'>删除图像</a>";
  77.     function recycleImage( $item ) {
  78.       $item.fadeOut(function() {
  79.         $item
  80.           .find( "a.ui-icon-refresh" )
  81.             .remove()
  82.           .end()
  83.           .css( "width", "96px")
  84.           .append( trash_icon )
  85.           .find( "img" )
  86.             .css( "height", "72px" )
  87.           .end()
  88.           .appendTo( $gallery )
  89.           .fadeIn();
  90.       });
  91.     }
  92.  
  93.     // 图像预览功能，演示 ui.dialog 作为模态窗口使用
  94.     function viewLargerImage( $link ) {
  95.       var src = $link.attr( "href" ),
  96.         title = $link.siblings( "img" ).attr( "alt" ),
  97.         $modal = $( "img[src$='" + src + "']" );
  98.  
  99.       if ( $modal.length ) {
  100.         $modal.dialog( "open" );
  101.       } else {
  102.         var img = $( "<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />" )
  103.           .attr( "src", src ).appendTo( "body" );
  104.         setTimeout(function() {
  105.           img.dialog({
  106.             title: title,
  107.             width: 400,
  108.             modal: true
  109.           });
  110.         }, 1 );
  111.       }
  112.     }
  113.  
  114.     // 通过事件代理解决图标行为
  115.     $( "ul.gallery > li" ).click(function( event ) {
  116.       var $item = $( this ),
  117.         $target = $( event.target );
  118.  
  119.       if ( $target.is( "a.ui-icon-trash" ) ) {
  120.         deleteImage( $item );
  121.       } else if ( $target.is( "a.ui-icon-zoomin" ) ) {
  122.         viewLargerImage( $target );
  123.       } else if ( $target.is( "a.ui-icon-refresh" ) ) {
  124.         recycleImage( $item );
  125.       }
  126.  
  127.       return false;
  128.     });
  129.   });
  130.   </script>
  131. </head>
  132. <body>
  133.  
  134. <div class="ui-widget ui-helper-clearfix">
  135.  
  136. <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
  137.   <li class="ui-widget-content ui-corner-tr">
  138.     <h5 class="ui-widget-header">High Tatras</h5>
  139.     <img src="/wp-content/uploads/2014/03/high_tatras_min.jpg" alt="High Tatras 的最高峰" width="96" height="72">
  140.     <a href="/wp-content/uploads/2014/03/high_tatras.jpg" title="查看大图" class="ui-icon ui-icon-zoomin">查看大图</a>
  141.     <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash">删除图像</a>
  142.   </li>
  143.   <li class="ui-widget-content ui-corner-tr">
  144.     <h5 class="ui-widget-header">High Tatras 2</h5>
  145.     <img src="/wp-content/uploads/2014/03/high_tatras2_min.jpg" alt="绿山湖畔的小屋" width="96" height="72">
  146.     <a href="/wp-content/uploads/2014/03/high_tatras2.jpg" title="查看大图" class="ui-icon ui-icon-zoomin">查看大图</a>
  147.     <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash">删除图像</a>
  148.   </li>
  149.   <li class="ui-widget-content ui-corner-tr">
  150.     <h5 class="ui-widget-header">High Tatras 3</h5>
  151.     <img src="/wp-content/uploads/2014/03/high_tatras3_min.jpg" alt="计划登高" width="96" height="72">
  152.     <a href="/wp-content/uploads/2014/03/high_tatras3.jpg" title="查看大图" class="ui-icon ui-icon-zoomin">查看大图</a>
  153.     <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash">删除图像</a>
  154.   </li>
  155.   <li class="ui-widget-content ui-corner-tr">
  156.     <h5 class="ui-widget-header">High Tatras 4</h5>
  157.     <img src="/wp-content/uploads/2014/03/high_tatras4_min.jpg" alt="在 Kozi kopka 的顶部" width="96" height="72">
  158.     <a href="/wp-content/uploads/2014/03/high_tatras4.jpg" title="查看大图" class="ui-icon ui-icon-zoomin">查看大图</a>
  159.     <a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash">删除图像</a>
  160.   </li>
  161. </ul>
  162.  
  163. <div id="trash" class="ui-widget-content ui-state-default">
  164.   <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">回收站</span> 回收站</h4>
  165. </div>
  166.  
  167. </div>
  168.  
  169.  
  170. </body>
  171. </html>


视觉反馈

当悬停在 droppable 上时，或者当 droppable 被激活（即一个可接受的 draggable 被放置在 droppable 上）时，改变 droppable 的外观。使用 hoverClass 或 activeClass 选项来分别指定 class。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 放置（Droppable） - 视觉反馈</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  10.   <style>
  11.   #draggable, #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  12.   #droppable, #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
  13.   h3 { clear: left; }
  14.   </style>
  15.   <script>
  16.   $(function() {
  17.     $( "#draggable" ).draggable();
  18.     $( "#droppable" ).droppable({
  19.       hoverClass: "ui-state-hover",
  20.       drop: function( event, ui ) {
  21.         $( this )
  22.           .addClass( "ui-state-highlight" )
  23.           .find( "p" )
  24.             .html( "Dropped!" );
  25.       }
  26.     });
  27.  
  28.     $( "#draggable2" ).draggable();
  29.     $( "#droppable2" ).droppable({
  30.       accept: "#draggable2",
  31.       activeClass: "ui-state-default",
  32.       drop: function( event, ui ) {
  33.         $( this )
  34.           .addClass( "ui-state-highlight" )
  35.           .find( "p" )
  36.             .html( "Dropped!" );
  37.       }
  38.     });
  39.   });
  40.   </script>
  41. </head>
  42. <body>
  43.  
  44. <h3>当悬停在 droppable 上时的反馈：</h3>
  45.  
  46. <div id="draggable" class="ui-widget-content">
  47.   <p>请拖拽我到目标</p>
  48. </div>
  49.  
  50. <div id="droppable" class="ui-widget-header">
  51.   <p>请放置在这里</p>
  52. </div>
  53.  
  54. <h3>当激活 draggable 时的反馈：</h3>
  55.  
  56. <div id="draggable2" class="ui-widget-content">
  57.   <p>请拖拽我到目标</p>
  58. </div>
  59.  
  60. <div id="droppable2" class="ui-widget-header">
  61.   <p>请放置在这里</p>
  62. </div>
  63.  
  64.  
  65. </body>
  66. </html>