jQuery UI ejemplo - lugar (Soltable)
Los widgets que se pueden arrastrar para crear el objetivo.
Para más detalles sobre la interacción lanzables, consulte la documentación de la API se puede colocar piezas pequeñas (Soltable el widget) .
La función predeterminada
Activación de la función lanzables en cualquier elemento DOM, y puede arrastrar los widgets para crear el objetivo.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI lugar (Soltable) - La función por defecto </ 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; altura: 100px; padding: 0.5em; float: left; margen: 10px 10px 10px 0;}
#droppable {width: 150px; altura: 150px; padding: 0.5em; float: left; margen: 10px;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ();
$ ( "#droppable") .droppable ({
la gota: function (event, ui) {
$ (Este)
.addClass ( "Estado-ui-resalte")
.find ( "p")
.html ( "Abandonado!");
}
});
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "arrastrable" class = "ui-Reproductor-content">
<P> Por favor, envienme arrastrados al lugar de destino! </ P>
</ Div>
<Div id = "lanzables" class = "ui-Reproductor-header">
<P> Mantener fuera de aquí! </ P>
</ Div>
</ Body>
</ Html>
aceptado
Utilice accept opciones de orientación elemento lanzables que acepta (o grupo de elementos).
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI lugar (Soltable) - aceptado </ 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; altura: 150px; padding: 0.5em; float: left; margen: 10px;}
#draggable, # arrastrable-no válido {width: 100px; altura: 100px; padding: 0.5em; float: left; margen: 10px 10px 10px 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable, # Arrastrable-no válido") .draggable ();
$ ( "#droppable") .droppable ({
aceptar: "#draggable",
activeClass: "Estado-ui-vuelo estacionario",
hoverclass: "ui-estado activo",
la gota: function (event, ui) {
$ (Este)
.addClass ( "Estado-ui-resalte")
.find ( "p")
.html ( "Abandonado!");
}
});
});
</ Script>
</ Head>
<Cuerpo>
<Div id = clase "arrastrable-no válido" = "ui-Reproductor-content">
<P> No puedo ser colocado arrastrable </ p>
</ Div>
<Div id = "arrastrable" class = "ui-Reproductor-content">
<P> Por favor, me arrastre al destino </ p>
</ Div>
<Div id = "lanzables" class = "ui-Reproductor-header">
<P> aceptar: '#draggable' </ p>
</ Div>
</ Body>
</ Html>
Evitar la propagación
Al utilizar lanzables anidada - por ejemplo, se puede tener una estructura de directorios editable-árbol con carpetas de documentos y nodos - greedy opción se establece en true cuando el arrastrable para evitar ser colocados en los nodos secundarios (lanzables) cuando la propagación evento.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI lugar (Soltable) - prevenir la propagación </ 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; altura: 40px; padding: 0.5em; float: left; margen: 10px 10px 10px 0;}
#droppable, # droppable2 {width: 230px; altura: 120px; padding: 0.5em; float: left; margen: 10px;}
# Soltable-interno, # droppable2-interior {width: 170px; altura: 60px; padding: 0.5em; float: left; margen: 10px;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ();
$ ( "#droppable, # Soltable-interior") .droppable ({
activeClass: "Estado-ui-vuelo estacionario",
hoverclass: "ui-estado activo",
la gota: function (event, ui) {
$ (Este)
.addClass ( "Estado-ui-resalte")
.find ( "> p")
.html ( "Abandonado!");
return false;
}
});
$ ( "# Droppable2, # droppable2-interior") .droppable ({
codiciosos: true,
activeClass: "Estado-ui-vuelo estacionario",
hoverclass: "ui-estado activo",
la gota: function (event, ui) {
$ (Este)
.addClass ( "Estado-ui-resalte")
.find ( "> p")
.html ( "Abandonado!");
}
});
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "arrastrable" class = "ui-Reproductor-content">
<P> Por favor, me arrastre al destino </ p>
</ Div>
<Div id = "lanzables" class = "ui-Reproductor-header">
<P> lanzables externa </ p>
<Div id = clase "lanzables-interior" = "ui-Reproductor-header">
<P> lanzables interna (sin codiciosos) </ p>
</ Div>
</ Div>
<Div id = "droppable2" class = "ui-Reproductor-header">
<P> lanzables externa </ p>
<Div id = "droppable2-interior" class = "ui-Reproductor-header">
<P> lanzables interna (con codiciosos) </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Ubicación de restauración que pueden arrastrarse
Al igual que con valores booleanos revert cuando la opción se puede arrastrar para detener el arrastre, que pueden arrastrarse de regreso (o su ayudante) a la ubicación original.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI lugar (Soltable) - Reducción de posición que pueden arrastrarse </ 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; altura: 100px; padding: 0.5em; float: left; margen: 10px 10px 10px 0;}
#droppable {width: 150px; altura: 150px; padding: 0.5em; float: left; margen: 10px;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Revert: "válida"});
$ ( "# Draggable2") .draggable ({volver: "no válido"});
$ ( "#droppable") .droppable ({
activeClass: "ui-estado-default",
hoverclass: "Estado-ui-vuelo estacionario",
la gota: function (event, ui) {
$ (Este)
.addClass ( "Estado-ui-resalte")
.find ( "p")
.html ( "colocado!");
}
});
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "arrastrable" class = "ui-Reproductor-content">
<P> reducción cuando se coloca en el blanco </ p>
</ Div>
<Div id = "draggable2" class = "ui-Reproductor-content">
<P> Cuando la reducción no se coloca en el objetivo </ p>
</ Div>
<Div id = "lanzables" class = "ui-Reproductor-header">
<P> Por favor, ponga aquí </ p>
</ Div>
</ Body>
</ Html>
Compras de demostración
Muestra cómo usar el panel de plegado para mostrar la estructura de directorios del producto, utilice arrastrar y soltar para añadir productos a la cesta de la compra, los productos cesta de la compra se pueden ordenar.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI lugar (Soltable) - Compras 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; ancho: 500px; margin-right: 2em;}
#cart {width: 200px; float: left; margin-top: 1 em;}
/ * Definición de la lista de estilos para maximizar * lanzables /
#cart ol {margin: 0; padding: 1 em 0 1 em 3em;}
</ Style>
<Script>
$ (Function () {
$ ( "#catalog") .accordion ();
$ ( "#catalog Li") .draggable ({
appendTo: "cuerpo",
ayudante: "clon"
});
$ ( "#cart Ol") .droppable ({
activeClass: "ui-estado-default",
hoverclass: "Estado-ui-vuelo estacionario",
aceptar: ": no (.ui-ordenable-helper)",
la gota: function (event, ui) {
$ (Este) .find ( ".placeholder") .Remove ();
$ ( "<Li> </ li>") .text (ui.draggable.text ()) .appendTo (este);
}
}). Sortable ({
artículos: "li: no (.placeholder)",
tipo: function () {
// Obtener el lanzables interactuar con asiento secundario sortable // utilizar connectWithSortable puede resolver este problema, pero no le permiten personalizar el / hoverclass opción activa $ (this) .removeClass ( "ui-estado-default");
}
});
});
</ Script>
</ Head>
<Cuerpo>
<id = "productos" div>
<Clase H1 = "ui-Reproductor-header"> Productos </ h1>
<Div id = "catálogo">
<H2> <a href="#"> camisetas </a> </ h2>
<Div>
<Ul>
<Li> Camisa Lolcat </ li>
<Li> cheezeburger camisa </ li>
<Li> Buckit camisa </ li>
</ Ul>
</ Div>
<H2> <a href="#"> Bolsas </a> </ h2>
<Div>
<Ul>
<Li> rayado de la cebra </ li>
<Li> Cuero Negro </ li>
<Li> Cuero de cocodrilo </ 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 = "carrito">
<Clase H1 = "ui-Reproductor-header"> cesta </ h1>
<Div class = "ui-Reproductor-content">
<Ol>
<Li class = "marcador de posición"> añadir productos aquí </ li>
</ Ol>
</ Div>
</ Div>
</ Body>
</ Html>
Simple Photo Manager
Puede arrastrar y soltar fotos a la papelera de reciclaje o haga clic en el icono de papelera para eliminar las fotos.
Puede arrastrar y soltar fotos en álbumes o haga clic en el icono de reciclaje para restaurar fotos.
Puede hacer zoom haciendo clic en el icono para ver una imagen más grande. jQuery UI de diálogo (diálogo) medios para ventana modal.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI lugar (Soltable) - sencillo gestor de fotos </ 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; anchura: 65%; min-height: 12em;}
.gallery.custom-estado-activa {background: #eee;}
.gallery li {float: left; anchura: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center;}
.gallery li h5 {margin: 0 0 0.4em; cursor: movimiento;}
.gallery li a {float: right;}
.gallery li a.ui-icono-encabritado {float: left;}
img .gallery li {width: 100%; cursor: movimiento;}
#trash {float: right; anchura: 32%; min-height: 18em; padding: 1%;}
#trash h4 {line-height: 16px; margin: 0 0 0.4em;}
#trash h4 .ui-icono {float: left;}
#trash .gallery h5 {display: none;}
</ Style>
<Script>
$ (Function () {
// Este es un álbum y basura var $ galería = $ ( "#gallery"),
Papelera $ = $ ( "#trash");
// Realizar la introducción en el álbum que pueden arrastrarse $ ( "li", $ galería) .draggable ({
cancelar: "a.ui-icono" //, haga clic en un icono no se inicia arrastrando revertir: "no válido", // Al quitar la entrada volverá a su posición original de contención: "documento",
ayudante: "clon",
cursor: "mover"
});
// Deja que la basura se puede colocar, aceptó la introducción en el álbum $ trash.droppable ({
aceptar: "#gallery> li",
activeClass: "Estado-ui-resalte",
la gota: function (event, ui) {
Borrar imagen (ui.draggable);
}
});
// Realizar un álbum puede ser colocado, aceptó la papelera de reciclaje de entrada $ gallery.droppable ({
aceptar: "li #trash",
activeClass: "costumbre-estado activo",
la gota: function (event, ui) {
recycleImage (ui.draggable);
}
});
// Borrar imagen recycle_icon función var = "<a href =" enlace / a / reciclar / script / cuándo / nos / tienen / js / off 'title =' imagen restaurada 'class = "ui ui-icon-icono-refresh' > restaurar la imagen </a> ";
la función Borrar imagen ($ item) {
$ Item.fadeOut (function () {
var $ list = $ ( "UL", $ basura) .length?
$ ( "UL", $ basura):
$ ( "<Ul class =" ui galería-helper-reset '/> ") .appendTo ($ basura);
$ Item.find ( "a.ui-icono-basura") .Remove ();
$ Item.append (recycle_icon) .appendTo (lista $) .fadeIn (function () {
$ artículo
.animate ({width: "48px"})
.find ( "img")
.animate ({height: "36px"});
});
});
}
// Restaurar imagen trash_icon var = "<a href =" enlace / a / basura / script / cuándo / nos / tienen / js / off 'title =' Quitar imagen 'class =' ui ui-icon-icono-basura ' > eliminar imagen </a> ";
recycleImage función ($ item) {
$ Item.fadeOut (function () {
$ artículo
.find ( "-a.ui-icono de actualización")
.Remove ()
.end ()
Css ( "ancho", "96px")
.Append (trash_icon)
.find ( "img")
Css ( "altura", "72px")
.end ()
.appendTo ($ galería)
.fadeIn ();
});
}
// Imagen característica de vista previa, Demos ui.dialog utilizado como viewLargerImage función de ventana modal (enlace $) {
var src = $ link.attr ( "href"),
title = $ link.siblings ( "img") .attr ( "alt"),
$ Modal = $ ( "img [src = $ '" + src + "']");
if ($ modal.length) {
$ Modal.dialog ( "abierta");
} Else {
var img = $ ( "<img alt =" "+ + título" '= width' 384 'height =' 288 'style =' display: none; padding: 8 píxeles; "/>")
.attr ( "src", src) .appendTo ( "cuerpo");
setTimeout (function () {
img.dialog ({
Título: título,
anchura: 400,
modal: true
});
}, 1);
}
}
// Proxy icono de la solución de comportamiento $ ( "ul.gallery> li") a través del evento .click (function (event) {
var item = $ $ (this),
Objetivo $ = $ (event.target);
if ($ target.is ( "a.ui-icono-basura")) {
Borrar imagen ($ item);
} Else if ($ target.is ( "a.ui-icono-encabritado")) {
viewLargerImage ($ target);
} Else if ($ target.is ( "a.ui-icono-refresh")) {
recycleImage ($ item);
}
return false;
});
});
</ Script>
</ Head>
<Cuerpo>
<Div class = "ui ui-Reproductor-helper-clearfix">
<Ul id = clase "galería" = "galería de ui-helper-reset ui-helper-clearfix">
<Li class = "ui-ui widget de-contenido-esquina-tr">
<Clase H5 = "ui-Reproductor-header"> Alto Tatra </ h5>
<Img src = "../ wp-content / uploads / 2014/03 / high_tatras_min.jpg" alt = "pico alto Tatras" width = altura "96" = "72">
<a href="../wp-content/uploads/2014/03/high_tatras.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> Ampliar </a>
<a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> borrar imágenes </a>
</ Li>
<Li class = "ui-ui widget de-contenido-esquina-tr">
<Clase H5 = "ui-Reproductor-header"> High Tatras 2 </ h5>
<Img src = "../ wp-content / uploads / 2014/03 / high_tatras2_min.jpg" alt = "Green Mountain Lake Cabin" width = altura "96" = "72">
<a href="../wp-content/uploads/2014/03/high_tatras2.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> Ampliar </a>
<a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> borrar imágenes </a>
</ Li>
<Li class = "ui-ui widget de-contenido-esquina-tr">
<Clase H5 = "ui-Reproductor-header"> High Tatras 3 </ h5>
<Img src = "../ wp-content / uploads / 2014/03 / high_tatras3_min.jpg" alt = "Plan de Escalada" width = altura "96" = "72">
<a href="../wp-content/uploads/2014/03/high_tatras3.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> Ampliar </a>
<a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> borrar imágenes </a>
</ Li>
<Li class = "ui-ui widget de-contenido-esquina-tr">
<Clase H5 = "ui-Reproductor-header"> Alto Tatra 4 </ h5>
<Img src = "../ wp-content / uploads / 2014/03 / high_tatras4_min.jpg" alt = "en la parte superior de Kozi Kopka" width = altura "96" = "72">
<a href="../wp-content/uploads/2014/03/high_tatras4.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"> Ampliar </a>
<a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"> borrar imágenes </a>
</ Li>
</ Ul>
<Div id = "basura" class = "ui-ui widget de-contenido-estado-default">
<Clase H4 = "ui-Reproductor-header"> <span class = "ui ui-icon-icono-basura"> Papelera </ span> Papelera </ h4>
</ Div>
</ Div>
</ Body>
</ Html>
La retroalimentación visual
Cuando se cierne sobre lanzables, o cuando lanzables se activa (es decir, una arrastrable aceptable está colocado en el lanzables) cuando se cambia la apariencia lanzables. Utilice hoverClass o activeClass opción para especificar la clase, respectivamente.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI lugar (Soltable) - retroalimentación visual </ 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; altura: 90px; padding: 0.5em; float: left; margen: 10px 10px 10px 0;}
#droppable, # droppable2 {width: 120px; altura: 120px; padding: 0.5em; float: left; margen: 10px;}
h3 {clear: left;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ();
$ ( "#droppable") .droppable ({
hoverclass: "Estado-ui-vuelo estacionario",
la gota: function (event, ui) {
$ (Este)
.addClass ( "Estado-ui-resalte")
.find ( "p")
.html ( "Abandonado!");
}
});
$ ( "# Draggable2") .draggable ();
$ ( "# Droppable2") .droppable ({
aceptar: "# draggable2",
activeClass: "ui-estado-default",
la gota: function (event, ui) {
$ (Este)
.addClass ( "Estado-ui-resalte")
.find ( "p")
.html ( "Abandonado!");
}
});
});
</ Script>
</ Head>
<Cuerpo>
<H3> Cuando se cierne sobre lanzables cuando la retroalimentación: </ h3>
<Div id = "arrastrable" class = "ui-Reproductor-content">
<P> Por favor, me arrastre al destino </ p>
</ Div>
<Div id = "lanzables" class = "ui-Reproductor-header">
<P> Por favor, ponga aquí </ p>
</ Div>
<H3> Cuando se activa la regeneración se pueda arrastrar: </ h3>
<Div id = "draggable2" class = "ui-Reproductor-content">
<P> Por favor, me arrastre al destino </ p>
</ Div>
<Div id = "droppable2" class = "ui-Reproductor-header">
<P> Por favor, ponga aquí </ p>
</ Div>
</ Body>
</ Html>