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

有关交互的更多详细信息，请参阅有关可放置小部件的 API 文档 ( )。

默认功能

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

 ta charset="utf-8">
 
 ink rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 cript src="//code.jquery.com/jquery-1.9.1.js">cript>
 cript src="//code.jquery.com/ui/1.10.4/jquery-ui.js">cript>
 ink rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
 
 #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; }
 
 cript>
 $(function() {
 $( "#draggable" ).draggable();
 $( "#droppable" ).droppable({
 drop: function( event, ui ) {
 $( this )
 .addClass( "ui-state-highlight" )
 .find( "p" )
 .html( "Dropped!" );
 }
 });
 });
 cript>

 
请把我拖拽到目标处！

 
请放置在这里！

接受

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

 ta charset="utf-8">
 
 ink rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 cript src="//code.jquery.com/jquery-1.9.1.js">cript>
 cript src="//code.jquery.com/ui/1.10.4/jquery-ui.js">cript>
 ink rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
 
 #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; }
 
 cript>
 $(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!" );
 }
 });
 });
 cript>

 
我是不能被放置的 draggable

 
请拖拽我到目标

 
accept: '#draggable'

查看演示

防止传播

使用嵌套时（例如，您可以拥有一个包含文件夹和文档节点的树状可编辑目录结构），该选项设置为 true 以防止放置在子节点 ( ) 上时发生事件传播。

 ta charset="utf-8">
 
 ink rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 cript src="//code.jquery.com/jquery-1.9.1.js">cript>
 cript src="//code.jquery.com/ui/1.10.4/jquery-ui.js">cript>
 ink rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
 
 #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; }
 
 cript>
 $(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!" );
 }
 });
 });
 cript>

 
请拖拽我到目标

 
外部 droppable
 

 
内部 droppable（不带有 greedy）
 

 
外部 droppable
 

 
内部 droppable（带有 greedy）
 

查看演示

恢复位置

当使用布尔选项停止拖动时，返回（或其助手）到原始位置。

 ta charset="utf-8">
 
 ink rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 cript src="//code.jquery.com/jquery-1.9.1.js">cript>
 cript src="//code.jquery.com/ui/1.10.4/jquery-ui.js">cript>
 ink rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
 
 #draggable, #draggable2 { 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; }
 
 cript>
 $(function() {
 $( "#draggable" ).draggable({ revert: "valid" });
 $( "#draggable2" ).draggable({ revert: "invalid" });
 $( "#droppable" ).droppable({
 activeClass: "ui-state-default",
 hoverClass: "ui-state-hover",
 drop: function( event, ui ) {
 $( this )
 .addClass( "ui-state-highlight" )
 .find( "p" )
 .html( "已放置！" );
 }
 });
 });
 cript>

 
当被放置在目标上时还原

 
当未被放置在目标上时还原

 
请放置在这里

查看演示

购物车演示

演示如何使用手风琴显示产品的目录结构，使用拖放将产品添加到购物车，并对购物车中的产品进行排序。

 ta charset="utf-8">
 
 ink rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 cript src="//code.jquery.com/jquery-1.9.1.js">cript>
 cript src="//code.jquery.com/ui/1.10.4/jquery-ui.js">cript>
 ink rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
 
 h1 { padding: .2em; margin: 0; }
 #products { float:left; width: 500px; margin-right: 2em; }
 #cart { width: 200px; float: left; margin-top: 1em; }
 
 #cart ol { margin: 0; padding: 1em 0 1em 3em; }
 
 cript>
 $(function() {
 $( "#catalog" ).accordion();
 $( "#catalog li" ).draggable({
 appendTo: "body",
 helper: "clone"
 });
 $( "#cart ol" ).droppable({
 activeClass: "ui-state-default",
 hoverClass: "ui-state-hover",
 accept: ":not(.ui-sortable-helper)",
 drop: function( event, ui ) {
 $( this ).find( ".placeholder" ).remove();
 $( "
" ).text( ui.draggable.text() ).appendTo( this );
 }
 }).sortable({
 items: "li:not(.placeholder)",
 sort: function() {
 // 获取由 droppable 与 sortable 交互而加入的条目
 // 使用 connectWithSortable 可以解决这个问题，但不允许您自定义 active/hoverClass 选项
 $( this ).removeClass( "ui-state-default" );
 }
 });
 });
 cript>

 
产品
 

 
T-Shirts
 

 

 
Lolcat Shirt
 
Cheezeburger Shirt
 
Buckit Shirt
 
 
 
Bags
 

 

 
Zebra Striped
 
Black Leather
 
Alligator Leather
 
 
 
Gadgets
 

 

 
iPhone
 
iPod
 
iPad
 
 
 

 
购物车
 

 

 
添加产品到这里
 
 

查看演示

简单的照片管理器

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

您可以通过将照片拖到相册或单击回收图标来恢复照片。

您可以通过单击缩放图标查看更大的图像。 () 小部件用于模式窗口。

 ta charset="utf-8">
 
 ink rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 cript src="//code.jquery.com/jquery-1.9.1.js">cript>
 cript src="//code.jquery.com/ui/1.10.4/jquery-ui.js">cript>
 ink rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
 
 #gallery { float: left; width: 65%; min-height: 12em; }
 .gallery.custom-state-active { background: #eee; }
 .gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
 .gallery li h5 { margin: 0 0 0.4em; cursor: move; }
 .gallery li a { float: right; }
 .gallery li a.ui-icon-zoomin { float: left; }
 .gallery li img { width: 100%; cursor: move; }
 #trash { float: right; width: 32%; min-height: 18em; padding: 1%; }
 #trash h4 { line-height: 16px; margin: 0 0 0.4em; }
 #trash h4 .ui-icon { float: left; }
 #trash .gallery h5 { display: none; }
 
 cript>
 $(function() {
 // 这是相册和回收站
 var $gallery = $( "#gallery" ),
 $trash = $( "#trash" );
 // 让相册的条目可拖拽
 $( "li", $gallery ).draggable({
 cancel: "a.ui-icon", // 点击一个图标不会启动拖拽
 revert: "invalid", // 当未被放置时，条目会还原回它的初始位置
 containment: "document",
 helper: "clone",
 cursor: "move"
 });
 // 让回收站可放置，接受相册的条目
 $trash.droppable({
 accept: "#gallery > li",
 activeClass: "ui-state-highlight",
 drop: function( event, ui ) {
 deleteImage( ui.draggable );
 }
 });
 // 让相册可放置，接受回收站的条目
 $gallery.droppable({
 accept: "#trash li",
 activeClass: "custom-state-active",
 drop: function( event, ui ) {
 recycleImage( ui.draggable );
 }
 });
 // 图像删除功能
 var recycle_icon = "还原图像";
 function deleteImage( $item ) {
 $item.fadeOut(function() {
 var $list = $( "ul", $trash ).length ?
 $( "ul", $trash ) :
 $( "
" ).appendTo( $trash );
 $item.find( "a.ui-icon-trash" ).remove();
 $item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
 $item .animate({ width: "48px" })
 .find( "img" )
 .animate({ height: "36px" });
 });
 });
 }
 // 图像还原功能
 var trash_icon = "删除图像";
 function recycleImage( $item ) {
 $item.fadeOut(function() {
 $item .find( "a.ui-icon-refresh" )
 .remove()
 .end()
 .css( "width", "96px")
 .append( trash_icon )
 .find( "img" )
 .css( "height", "72px" )
 .end()
 .appendTo( $gallery )
 .fadeIn();
 });
 }
 // 图像预览功能，演示 ui.dialog 作为模态窗口使用
 function viewLargerImage( $link ) {
 var src = $link.attr( "href" ),
 title = $link.siblings( "img" ).attr( "alt" ),
 $modal = $( "img[src$='" + src + "']" );
 if ( $modal.length ) {
 $modal.dialog( "open" );
 } else {
 var img = $( "" )
 .attr( "src", src ).appendTo( "body" );
 setTimeout(function() {
 img.dialog({
 title: title,
 width: 400,
 modal: true
 });
 }, 1 );
 }
 }
 // 通过事件代理解决图标行为
 $( "ul.gallery > li" ).click(function( event ) {
 var $item = $( this ),
 $target = $( event.target );
 if ( $target.is( "a.ui-icon-trash" ) ) {
 deleteImage( $item );
 } else if ( $target.is( "a.ui-icon-zoomin" ) ) {
 viewLargerImage( $target );
 } else if ( $target.is( "a.ui-icon-refresh" ) ) {
 recycleImage( $item );
 }
 return false;
 });
 });
 cript>


 

 
High Tatras
 
 查看大图
 删除图像
 
 

 
High Tatras 2
 
 查看大图
 删除图像
 
 

 
High Tatras 3
 
 查看大图
 删除图像
 
 

 
High Tatras 4
 
 查看大图
 删除图像
 

 
回收站 回收站

查看演示