jQuery UI example - place (Droppable)
Widgets that can be dragged to create the target.
For more details about the droppable interaction, see the API documentation can be placed small parts (Droppable the Widget) .
The default function
Enabling droppable function on any DOM element, and can drag widgets to create the target.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI place (Droppable) - The default function </ 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> Please send me dragged to the target place! </ P>
</ Div>
<Div id = "droppable" class = "ui-widget-header">
<P> Keep out of here! </ P>
</ Div>
</ Body>
</ Html>
accept
Use accept options targeting droppable element which accepts (or group of elements).
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI place (Droppable) - accepted </ 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> I can not be placed draggable </ p>
</ Div>
<Div id = "draggable" class = "ui-widget-content">
<P> Please drag me to the destination </ p>
</ Div>
<Div id = "droppable" class = "ui-widget-header">
<P> accept: '#draggable' </ p>
</ Div>
</ Body>
</ Html>
Prevent the spread
When using nested droppable - for example, you can have a tree-editable directory structure with folders and document nodes - greedy option is set to true when the draggable to prevent being placed on the child nodes (droppable) when the event propagation.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI place (Droppable) - prevent the spread </ 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> Please drag me to the destination </ p>
</ Div>
<Div id = "droppable" class = "ui-widget-header">
<P> External droppable </ p>
<Div id = "droppable-inner" class = "ui-widget-header">
<P> Internal droppable (without greedy) </ p>
</ Div>
</ Div>
<Div id = "droppable2" class = "ui-widget-header">
<P> External droppable </ p>
<Div id = "droppable2-inner" class = "ui-widget-header">
<P> Internal droppable (with greedy) </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Restore draggable location
As with Boolean values revert when draggable option to stop dragging, return draggable (or its assistant) to the original location.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI place (Droppable) - reduction draggable position </ 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, # 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;}
</ Style>
<Script>
$ (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 ( "placed!");
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "draggable" class = "ui-widget-content">
<P> reduction when placed on the target </ p>
</ Div>
<Div id = "draggable2" class = "ui-widget-content">
<P> When the reduction is not placed on the target </ p>
</ Div>
<Div id = "droppable" class = "ui-widget-header">
<P> Please put in here </ p>
</ Div>
</ Body>
</ Html>
Shopping Cart Demo
Demonstrates how to use the folding panel to display product directory structure, use drag and drop to add products to the shopping cart, shopping cart products are sortable.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI place (Droppable) - Shopping Cart Demo </ 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>
h1 {padding: .2em; margin: 0;}
#products {float: left; width: 500px; margin-right: 2em;}
#cart {width: 200px; float: left; margin-top: 1em;}
/ * Define the list of styles to maximize droppable * /
#cart ol {margin: 0; padding: 1em 0 1em 3em;}
</ Style>
<Script>
$ (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 ();
$ ( "<Li> </ li>") .text (ui.draggable.text ()) .appendTo (this);
}
}). Sortable ({
items: "li: not (.placeholder)",
sort: function () {
// Get the droppable interacting with sortable added entry // use connectWithSortable can solve this problem, but does not allow you to customize the active / hoverClass option $ (this) .removeClass ( "ui-state-default");
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "products">
<H1 class = "ui-widget-header"> Products </ h1>
<Div id = "catalog">
<H2> <a href="#"> T-Shirts </a> </ h2>
<Div>
<Ul>
<Li> Lolcat Shirt </ li>
<Li> Cheezeburger Shirt </ li>
<Li> Buckit Shirt </ li>
</ Ul>
</ Div>
<H2> <a href="#"> Bags </a> </ h2>
<Div>
<Ul>
<Li> Zebra Striped </ li>
<Li> Black Leather </ li>
<Li> Alligator Leather </ li>
</ Ul>
</ Div>
<H2> <a href="#"> Gadgets </a> </ h2>
<Div>
<Ul>
<Li> iPhone </ li>
<Li> iPod </ li>
<Li> iPad </ li>
</ Ul>
</ Div>
</ Div>
</ Div>
<Div id = "cart">
<H1 class = "ui-widget-header"> cart </ h1>
<Div class = "ui-widget-content">
<Ol>
<Li class = "placeholder"> add products here </ li>
</ Ol>
</ Div>
</ Div>
</ Body>
</ Html>
Simple Photo Manager
You can drag and drop photos to the Recycle Bin or click the trash can icon to delete the photos.
You can drag and drop photos into albums or click the recycle icon to restore photos.
You can zoom by clicking on the icon to view a larger image. jQuery UI Dialog (dialog) means for modal window.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI place (Droppable) - simple photo manager </ 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>
#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;}
</ Style>
<Script>
$ (Function () {
// This is an album and trash var $ gallery = $ ( "#gallery"),
$ Trash = $ ( "#trash");
// Make the album entry draggable $ ( "li", $ gallery) .draggable ({
cancel: "a.ui-icon", // click on an icon does not start dragging revert: "invalid", // When unplaced, the entry will revert back to its original position containment: "document",
helper: "clone",
cursor: "move"
});
// Let the trash can be placed, accepted the album entry $ trash.droppable ({
accept: "#gallery> li",
activeClass: "ui-state-highlight",
drop: function (event, ui) {
deleteImage (ui.draggable);
}
});
// Make an album can be placed, accepted the Recycle Bin entry $ gallery.droppable ({
accept: "#trash li",
activeClass: "custom-state-active",
drop: function (event, ui) {
recycleImage (ui.draggable);
}
});
// Image delete function var recycle_icon = "<a href = 'link / to / recycle / script / when / we / have / js / off' title = 'restored image' class = 'ui-icon ui-icon-refresh' > restore image </a> ";
function deleteImage ($ item) {
$ Item.fadeOut (function () {
var $ list = $ ( "ul", $ trash) .length?
$ ( "Ul", $ trash):
$ ( "<Ul class = 'gallery ui-helper-reset' />") .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 Restore var trash_icon = "<a href = 'link / to / trash / script / when / we / have / js / off' title = 'Remove image' class = 'ui-icon ui-icon-trash' > delete image </a> ";
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 feature, Demos ui.dialog used 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 = $ ( "<img alt = '" + title + "' width = '384' height = '288' style = 'display: none; padding: 8px;' />")
.attr ( "src", src) .appendTo ( "body");
setTimeout (function () {
img.dialog ({
title: title,
width: 400,
modal: true
});
}, 1 );
}
}
// Proxy icon solving behavior $ ( "ul.gallery> li") through the event .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;
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget ui-helper-clearfix">
<Ul id = "gallery" class = "gallery ui-helper-reset ui-helper-clearfix">
<Li class = "ui-widget-content ui-corner-tr">
<H5 class = "ui-widget-header"> High Tatras </ h5>
<Img src = "../ wp-content / uploads / 2014/03 / high_tatras_min.jpg" alt = "High Tatras peak" width = "96" height = "72">
<a href="../wp-content/uploads/2014/03/high_tatras.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> View Larger </a>
<a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> delete images </a>
</ Li>
<Li class = "ui-widget-content ui-corner-tr">
<H5 class = "ui-widget-header"> High Tatras 2 </ h5>
<Img src = "../ wp-content / uploads / 2014/03 / high_tatras2_min.jpg" alt = "Green Mountain Lake Cabin" width = "96" height = "72">
<a href="../wp-content/uploads/2014/03/high_tatras2.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> View Larger </a>
<a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> delete images </a>
</ Li>
<Li class = "ui-widget-content ui-corner-tr">
<H5 class = "ui-widget-header"> High Tatras 3 </ h5>
<Img src = "../ wp-content / uploads / 2014/03 / high_tatras3_min.jpg" alt = "Climbing Plan" width = "96" height = "72">
<a href="../wp-content/uploads/2014/03/high_tatras3.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> View Larger </a>
<a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> delete images </a>
</ Li>
<Li class = "ui-widget-content ui-corner-tr">
<H5 class = "ui-widget-header"> High Tatras 4 </ h5>
<Img src = "../ wp-content / uploads / 2014/03 / high_tatras4_min.jpg" alt = "at the top of Kozi kopka" width = "96" height = "72">
<a href="../wp-content/uploads/2014/03/high_tatras4.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> View Larger </a>
<a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> delete images </a>
</ Li>
</ Ul>
<Div id = "trash" class = "ui-widget-content ui-state-default">
<H4 class = "ui-widget-header"> <span class = "ui-icon ui-icon-trash"> Trash </ span> Trash </ h4>
</ Div>
</ Div>
</ Body>
</ Html>
Visual feedback
When hovering over droppable, or when droppable is activated (ie, an acceptable draggable is placed on the droppable) when changing droppable appearance. Use hoverClass or activeClass option to specify the class, respectively.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI place (Droppable) - visual feedback </ 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, # 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> When hovering over droppable when feedback: </ h3>
<Div id = "draggable" class = "ui-widget-content">
<P> Please drag me to the destination </ p>
</ Div>
<Div id = "droppable" class = "ui-widget-header">
<P> Please put in here </ p>
</ Div>
<H3> When activated draggable feedback: </ h3>
<Div id = "draggable2" class = "ui-widget-content">
<P> Please drag me to the destination </ p>
</ Div>
<Div id = "droppable2" class = "ui-widget-header">
<P> Please put in here </ p>
</ Div>
</ Body>
</ Html>