jQuery UI exemplo - local (droppable)
Widgets que podem ser arrastados para criar o alvo.
Para mais detalhes sobre a interação droppable, consulte a documentação da API pode ser colocado peças pequenas (droppable o Widget) .
A função padrão
Ativação da função de droppable em qualquer elemento DOM, e pode arrastar widgets para criar o alvo.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI lugar (droppable) - A função padrão </ 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 ({
solte: function (evento, ui) {
$ (Este)
.addClass ( "ui-state-destaque")
.find ( "p")
.html ( "Caiu!");
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "arrastado" class = "ui-widget-content">
<P> Por favor me envie arrastados para o local de destino! </ P>
</ Div>
<Div id = "droppable" class = "ui-widget-header">
<P> Manter fora do aqui! </ P>
</ Div>
</ Body>
</ Html>
aceite
Use accept opções de segmentação elemento droppable que aceita (ou grupo de elementos).
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI lugar (droppable) - aceite </ 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 ({
aceitar: "#draggable",
activeClass: "ui-state-hover",
hoverClass: "-ui-estado ativo",
solte: function (evento, ui) {
$ (Este)
.addClass ( "ui-state-destaque")
.find ( "p")
.html ( "Caiu!");
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "draggable-nonvalid" class = "ui-widget-content">
<P> Eu não pode ser colocado draggable </ p>
</ Div>
<Div id = "arrastado" class = "ui-widget-content">
<P> Por favor me arrastar para o destino </ p>
</ Div>
<Div id = "droppable" class = "ui-widget-header">
<P> aceitamos: '#draggable' </ p>
</ Div>
</ Body>
</ Html>
Evitar a propagação
Ao usar droppable nested - por exemplo, você pode ter uma estrutura de diretório árvore editável com pastas e nós do documento - greedy opção é definida como verdadeiro quando o draggable para evitar ser colocado sobre os nós filho (droppable), quando a propagação do evento.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI lugar (droppable) - evitar a propagação </ 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-interior, # droppable2-interno {width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ();
$ ( "#droppable, # Droppable-interior") .droppable ({
activeClass: "ui-state-hover",
hoverClass: "-ui-estado ativo",
solte: function (evento, ui) {
$ (Este)
.addClass ( "ui-state-destaque")
.find ( "> p")
.html ( "Caiu!");
return false;
}
});
$ ( "# Droppable2, # droppable2-interior") .droppable ({
gananciosos: true,
activeClass: "ui-state-hover",
hoverClass: "-ui-estado ativo",
solte: function (evento, ui) {
$ (Este)
.addClass ( "ui-state-destaque")
.find ( "> p")
.html ( "Caiu!");
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "arrastado" class = "ui-widget-content">
<P> Por favor me arrastar para o destino </ p>
</ Div>
<Div id = "droppable" class = "ui-widget-header">
<P> droppable Externa </ p>
<Div id = "droppable-interior" class = "ui-widget-header">
<P> droppable Interno (sem gananciosos) </ p>
</ Div>
</ Div>
<Div id = "droppable2" class = "ui-widget-header">
<P> droppable Externa </ p>
<Div id = "droppable2-interior" class = "ui-widget-header">
<P> droppable Interno (com gananciosos) </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Restaurar localização draggable
Tal como acontece com valores booleanos revert quando a opção arrastável para parar de arrastar, o retorno draggable (ou seu assistente) para o local original.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI lugar (droppable) - redução posição draggable </ 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 ({Reverter: "válido"});
$ ( "# Draggable2") .draggable ({reverter: "inválido"});
$ ( "#droppable") .droppable ({
activeClass: "-ui-estado padrão",
hoverClass: "ui-state-hover",
solte: function (evento, ui) {
$ (Este)
.addClass ( "ui-state-destaque")
.find ( "p")
.html ( "colocado!");
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "arrastado" class = "ui-widget-content">
<P> redução quando colocados no destino </ p>
</ Div>
<Div id = "draggable2" class = "ui-widget-content">
<P> Quando a redução não é colocada sobre o alvo </ p>
</ Div>
<Div id = "droppable" class = "ui-widget-header">
<P> Por favor, coloque aqui </ p>
</ Div>
</ Body>
</ Html>
Carrinho de demonstração
Demonstra como usar o painel de dobragem para exibir a estrutura de diretórios do produto, usar arrastar e soltar para adicionar o produto ao carrinho de compras, carrinho de compras produtos são classificáveis.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI lugar (droppable) - Carrinho de compras demonstração </ 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;}
/ * Definir a lista de estilos para maximizar * droppable /
#cart ol {margin: 0; padding: 1em 0 1em 3em;}
</ Style>
<Script>
$ (Function () {
$ ( "#catalog") .accordion ();
$ ( "#catalog Li") .draggable ({
appendTo: "corpo",
helper: "clone"
});
$ ( "Ol #cart") .droppable ({
activeClass: "-ui-estado padrão",
hoverClass: "ui-state-hover",
aceitar: ": não (.ui-classificáveis-helper)",
solte: function (evento, ui) {
$ (Este) .find ( ".placeholder") .remove ();
$ ( "<Li> </ li>") .text (ui.draggable.text ()) .appendTo (this);
}
}). Ordenável ({
itens: "li: não (.placeholder)",
tipo: function () {
// Obter o droppable interagindo com classificáveis entrada adicionada // usar connectWithSortable pode resolver este problema, mas não permite que você personalize o ativo / hoverClass opção $ (this) .removeClass ( "ui-estado padrão");
}
});
});
</ Script>
</ Head>
<Body>
<div id = "produtos">
<H1 class = "ui-widget-header"> Produtos </ h1>
<Div id = "catálogo">
<H2> <a href="#"> Camisetas </a> </ h2>
<Div>
<Ul>
<Li> Lolcat shirt </ li>
<Li> Cheezeburger shirt </ li>
<Li> Buckit shirt </ li>
</ Ul>
</ Div>
<H2> <a href="#"> Bolsas </a> </ h2>
<Div>
<Ul>
<Li> Striped Zebra </ li>
<Li> couro preto </ 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 = "carrinho">
<H1 class = "ui-widget-header"> carrinho </ h1>
<Div class = "ui-widget-content">
<Ol>
<LI class = "espaço reservado"> adicionar produtos aqui </ li>
</ Ol>
</ Div>
</ Div>
</ Body>
</ Html>
Simples Photo Manager
Você pode arrastar e soltar fotos para a Lixeira ou clique no ícone da lixeira para excluir as fotos.
Você pode arrastar e soltar fotos em álbuns ou clique no ícone de reciclagem para restaurar fotos.
Você pode ampliar clicando no ícone para ver uma imagem maior. jQuery UI diálogo (de diálogo) significa para a janela modal.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI lugar (droppable) - gerente simples da foto </ 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-Estado ativo {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.4em 0 0; 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.4em 0 0;}
#trash h4 .ui-icon {float: left;}
#trash .gallery h5 {display: none;}
</ Style>
<Script>
$ (Function () {
// Este é um álbum e lixo var $ galeria = $ ( "#gallery"),
$ Trash = $ ( "#trash");
// Faz a entrada álbum draggable $ ( "li", $ galeria) .draggable ({
cancel: "a.ui-icon", // clicar em um ícone não começar a arrastar reverter: "inválido", // Quando unplaced, a entrada irá reverter para seu original contenção posição: "documento",
helper: "clone",
cursor: "mover"
});
// Deixe o lixo pode ser colocado, aceitou a entrada álbum $ trash.droppable ({
aceitar: "#gallery> li",
activeClass: "ui-state-destaque",
solte: function (evento, ui) {
deleteImage (ui.draggable);
}
});
// Faz um álbum pode ser colocado, aceitou a Lixeira entrada de $ gallery.droppable ({
aceitar: "li #trash",
activeClass: "-custom-estado ativo",
solte: function (evento, ui) {
recycleImage (ui.draggable);
}
});
// Imagem excluir a função var recycle_icon = "<a href =" link / a / reciclagem / script / quando / se / tem / js / off 'title =' imagem restaurada 'class =' ui-ui-ícone ícone-refresh ' > restaurar a imagem </a> ";
deleteImage function ($ item) {
$ Item.fadeOut (function () {
$ List var = $ ( "ul", $ lixo) .length?
$ ( "UL", $ lixo):
$ ( "<Ul class =" galeria ui-helper-reset "/>") .appendTo ($ lixo);
$ Item.find ( "a.ui-icon-lixo") .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 / a / trash / script / quando / se / tem / js / off 'title =' Remover imagem 'class =' ui-ui ícone-icon-trash ' > excluir imagem </a> ";
recycleImage function ($ item) {
$ Item.fadeOut (function () {
$ item
.find ( "a.ui-icon-refresh")
.remove ()
.end ()
CSS ( "width", "96px")
.append (trash_icon)
.find ( "img")
CSS ( "altura", "72px")
.end ()
.appendTo ($ galeria)
.fadeIn ();
});
}
// Imagem recurso de visualização, utilizado como um viewLargerImage função de janela modal ($ link) Demos ui.dialog {
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 = '" + título + "" width = "384" height = "288" style = "display: none; padding: 8px;' />")
.attr ( "src", src) .appendTo ( "body");
setTimeout (function () {
img.dialog ({
Título: título,
width: 400,
modal: true
});
}, 1);
}
}
// Proxy ícone resolver o comportamento $ ( "ul.gallery> li") através do evento .click (function (event) {
var $ item = $ (this),
$ Meta = $ (event.target);
if ($ target.is ( "a.ui-icon-lixo")) {
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 ui-widget-helper-clearfix">
<Ul id = "galeria" class = "galeria-ui-helper redefinição ui-helper-clearfix">
<Li class = "-ui-widget conteúdo ui-canto-tr">
<Class H5 = "ui-widget-header"> High Tatras </ H5>
<Img src = "../ wp-content / uploads / 2014/03 / high_tatras_min.jpg" alt = "High Tatras pico" 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"> apagar imagens </a>
</ Li>
<Li class = "-ui-widget conteúdo ui-canto-tr">
<Class H5 = "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"> apagar imagens </a>
</ Li>
<Li class = "-ui-widget conteúdo ui-canto-tr">
<Class H5 = "ui-widget-header"> High Tatras 3 </ H5>
<Img src = "../ wp-content / uploads / 2014/03 / high_tatras3_min.jpg" alt = "Plano de Escalada" 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"> apagar imagens </a>
</ Li>
<Li class = "-ui-widget conteúdo ui-canto-tr">
<Class H5 = "ui-widget-header"> High Tatras 4 </ H5>
<Img src = "../ wp-content / uploads / 2014/03 / high_tatras4_min.jpg" alt = "no topo da Kozi Kopka" width = altura "96" = "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"> apagar imagens </a>
</ Li>
</ Ul>
<Div id = "lixo" class = "-ui-widget conteúdo ui-estado padrão">
<Classe H4 = "ui-widget-header"> <span class = "ui-ui ícone-icon-lixo"> Lixo </ span> Lixo </ h4>
</ Div>
</ Div>
</ Body>
</ Html>
feedback visual
Quando pairando sobre soltável, ou quando soltável é activado (ou seja, um arrastável aceitável é colocado no soltável) quando se muda a aparência soltável. Use hoverClass ou activeClass opção para especificar a classe, respectivamente.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI lugar (droppable) - feedback 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; 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",
solte: function (evento, ui) {
$ (Este)
.addClass ( "ui-state-destaque")
.find ( "p")
.html ( "Caiu!");
}
});
$ ( "# Draggable2") .draggable ();
$ ( "# Droppable2") .droppable ({
aceitar: "# draggable2",
activeClass: "-ui-estado padrão",
solte: function (evento, ui) {
$ (Este)
.addClass ( "ui-state-destaque")
.find ( "p")
.html ( "Caiu!");
}
});
});
</ Script>
</ Head>
<Body>
<H3> Quando pairando sobre droppable quando o feedback: </ h3>
<Div id = "arrastado" class = "ui-widget-content">
<P> Por favor me arrastar para o destino </ p>
</ Div>
<Div id = "droppable" class = "ui-widget-header">
<P> Por favor, coloque aqui </ p>
</ Div>
<H3> Quando ativado o feedback draggable: </ h3>
<Div id = "draggable2" class = "ui-widget-content">
<P> Por favor me arrastar para o destino </ p>
</ Div>
<Div id = "droppable2" class = "ui-widget-header">
<P> Por favor, coloque aqui </ p>
</ Div>
</ Body>
</ Html>