## Default Functionality Enable droppable functionality on any DOM element and create a target for the draggable widget. #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; } $(function() { $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); }); ## Accept Use the `accept` option to specify which element (or group of elements) the target droppable accepts. #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; } $(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!" ); } }); }); ## Prevent Propagation When using nested droppables — for example, you might have a tree-like editable directory structure with folder and document nodes — set the `greedy` option to true to prevent event propagation when a draggable is dropped on a child node (droppable). #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; } $(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!" ); } }); }); ## Revert Draggable Position Return the draggable (or its helper) to its original position when dragging stops, using the boolean `revert` option. #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; } $(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( "Dropped!" ); } }); }); ## Shopping Cart Demo Demonstrates how to use an accordion to display a catalog of products, and drag-and-drop to add products to a shopping cart, where the products are sortable. h1 { padding: .2em; margin: 0; } #products { float:left; width: 500px; margin-right: 2em; } #cart { width: 200px; float: left; margin-top: 1em; } /* Define list styles to maximize droppable area */ #cart ol { margin: 0; padding: 1em 0 1em 3em; } $(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() { // Get the items added by droppable-sortable interaction // Using connectWithSortable would solve this, but doesn't allow you to customize the active/hoverClass options $( this ).removeClass( "ui-state-default" ); } }); }); ## Simple Photo Manager You can delete photos by dragging them to the trash or clicking the trash icon. You can restore photos by dragging them to the album or clicking the recycle icon. You can view a larger image by clicking the zoom icon. The jQuery UI dialog widget is used for the modal window. #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; } $(function() { // The gallery and the trash var $gallery = $( "#gallery" ), $trash = $( "#trash" ); // Let the gallery items be draggable $( "li", $gallery ).draggable({ cancel: "a.ui-icon", // clicking an icon won't initiate dragging revert: "invalid", // when not dropped, the item reverts to its initial position containment: "document", helper: "clone", cursor: "move" }); // Let the trash be droppable, accepting items from the gallery $trash.droppable({ accept: "#gallery > li", activeClass: "ui-state-highlight", drop: function( event, ui ) { deleteImage( ui.draggable ); } }); // Let the gallery be droppable as well, accepting items from the trash $gallery.droppable({ accept: "#trash li", activeClass: "custom-state-active", drop: function( event, ui ) { recycleImage( ui.draggable ); } }); // Image deletion function var recycle_icon = "Recycle this image"; 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" }); }); }); } // Image recycle function var trash_icon = "Delete this image"; 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(); }); } // Image preview function, demonstrating ui.dialog as a modal window 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 ); } } // Resolve icon behavior via event delegation $( "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; }); });

• High Tatras

  View larger Delete image

• High Tatras 2

  View larger Delete image

• High Tatras 3

  <img src="/wp-content/uplo
← Example ResizableExample Draggable →