jQuery UI esempio - drag (Draggable)
Permettere il mouse per spostare l'elemento.
Per maggiori dettagli su l'interazione trascinabile, consultare la documentazione delle API può trascinare e rilasciare i widget (il trascinabili il Widget) .
La funzione di default
Attivare la funzione trascinabili su qualsiasi elemento DOM. Cliccando e trascinando il mouse nella finestra per spostare l'oggetto trascinabile.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI di trascinamento (Draggable) - La funzione di default </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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: 150px; height: 150px; padding: 0.5em;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ();
});
</ Script>
</ Head>
<Body>
<Div id = "trascinabile" class = "ui-widget di-content">
<P> Si prega di trascinare me! </ P>
</ Div>
</ Corpo>
</ Html>
scorrimento automatico
scorrimento automatico all'interno del documento quando il trascinabile spostato al di fuori della finestra. Impostare il scroll opzione su true per consentire lo scorrimento automatico, messa a punto, la velocità di scorrimento quando si scorre il grilletto scrollSensitivity e scrollSpeed le opzioni di impostazione.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI di trascinamento (Draggable) - Lo scorrimento automatico </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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, # draggable3 {width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Scorrere: true});
$ ( "# Draggable2") .draggable ({scorrimento: vero, scrollSensitivity: 100});
$ ( "# Draggable3") .draggable ({scorrimento: vero, Scrollspeed: 100});
});
</ Script>
</ Head>
<Body>
<Div id = "trascinabile" class = "ui-widget di-content">
<P> Scroll è impostata su true, l'impostazione di default </ p>
</ Div>
<Div id = "draggable2" class = "ui-widget di-content">
<P> scrollSensitivity a 100 </ p>
</ Div>
<Div id = "draggable3" class = "ui-widget di-content">
<P> Scrollspeed a 100 </ p>
</ Div>
<Div style = "Altezza: 5000px; width: 1px;"> </ div>
</ Corpo>
</ Html>
moto vincolato
Area Draggable definita dal limite per vincolare il movimento di ogni trascinabile. Impostare axis opzioni per limitare il percorso trascinabili per l'asse X o asse Y, o containment opzione per specificare un genitore elemento DOM o un selettore jQuery, come 'documento.'.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI di trascinamento (Draggable) - moto vincolato </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
#draggable, # draggable2 {margin-bottom: 20px;}
#draggable {cursore: n-ridimensionamento;}
# Draggable2 {cursore: e-ridimensionamento;}
# Contenimento-wrapper {width: 95%; height: 150px; border: #ccc solido 2px; padding: 10px;}
h3 {clear: left;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Asse: "y"});
$ ( "# Draggable2") .draggable ({asse: "x"});
$ ( "# Draggable3") .draggable ({contenimento: "# contenimento-wrapper", scorrere: false});
$ ( "# Draggable5") .draggable ({contenimento: "genitore"});
});
</ Script>
</ Head>
<Body>
<H3> movimento lungo l'asse di vincolo: </ h3>
<Div id = "trascinabile" class = "ui-widget di-contenuti trascinabili">
<P> Solo trascinamento verticale </ p>
</ Div>
<Div id = "draggable2" class = "ui-widget di-contenuti trascinabili">
<P> Solo trascinare orizzontale </ p>
</ Div>
<H3> o moto vincolato a un altro elemento DOM: </ h3>
<Div id = "contenimento-wrapper">
<Div id = "draggable3" class = "ui-widget di-contenuti trascinabili">
<P> sono stato costretto in una scatola </ p>
</ Div>
<Div class = "ui-widget di-contenuti trascinabili">
<P id = "draggable5" class = "ui-widget di-header"> ero confinato entro l'elemento principale </ p>
</ Div>
</ Div>
</ Corpo>
</ Html>
Stile cursore
Quando si trascina l'oggetto per posizionare il cursore. Per impostazione predefinita, il cursore si trova nel mezzo trascinato oggetto. Utilizzare cursorAt opzione per specificare la posizione rispetto all'altra (specificato rispetto a un alto valore di pixel, destro, inferiore, sinistra) del trascinabili. Fornendo un valore cursore CSS valido con le cursor opzioni per personalizzare l'aspetto del cursore. I valori del cursore CSS validi sono: di default, spostare, puntatore, croce, e così via.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI di trascinamento (Draggable) - Cursore di stile </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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, # draggable3 {width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Cursore: "move", cursorAt: {top: 56, rimasto: 56}});
$ ( "# Draggable2") .draggable ({cursore: "mirino", cursorAt: {top: -5, rimasto: -5}});
$ ( "# Draggable3") .draggable ({cursorAt: {fondo: 0}});
});
</ Script>
</ Head>
<Body>
<Div id = "trascinabile" class = "ui-widget di-content">
<P> Sono sempre nel mezzo (rispetto al mouse) </ p>
</ Div>
<Div id = "draggable2" class = "ui-widget di-content">
<P> Il mio cursore sinistro -5 e top -5 </ p>
</ Div>
<Div id = "draggable3" class = "ui-widget di-content">
<P> Il mio solo controllare la posizione del cursore valori 'bottom' </ p>
</ Div>
</ Corpo>
</ Html>
partenza ritardata
Con delay millisecondi di ritardo iniziate a trascinare le impostazioni delle opzioni. Con distance opzione viene premuto e trascinare il cursore al pixel specificato prima di permettere il drag and drop.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI di trascinamento (Draggable) - partenza ritardata </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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: 120px; height: 120px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Distanza: 20});
$ ( "# Draggable2") .draggable ({ritardo: 1000});
$ ( ".ui-Draggable") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Div id = "trascinabile" class = "ui-widget di-content">
<P> Solo quando trascino un pixel di 20, e ha cominciato a trascinare </ p>
</ Div>
<Div id = "draggable2" class = "ui-widget di-content">
Dopo <p> Non importa quanta distanza si deve trascinare e trascinare cominciato ad aspettare 1000ms </ p>
</ Div>
</ Corpo>
</ Html>
evento
trascinabili sul start , drag e stop eventi. Trascinando l'inizio trigger di start dell'evento, attivato durante trascinare drag evento, attivato quando la resistenza di arresto stop evento.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI di trascinamento (Draggable) - Eventi </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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: 16EM; padding: 0 1em;}
#draggable ul li {margin: 1em 0; padding: 0.5em 0;} * html #draggable ul li {height: 1%;}
#draggable ul li span.ui-icona {float: left;}
#draggable ul li span.count {font-weight: bold;}
</ Style>
<Script>
$ (Function () {
var $ start_counter = $ ( "# evento-start"),
$ Drag_counter = $ ( "# evento-trascinamento"),
$ Stop_counter = $ ( "# evento-stop"),
conta = [0, 0, 0];
$ ( "#draggable") .draggable ({
iniziare: function () {
conta [0] ++;
updateCounterStatus ($ start_counter, conta [0]);
},
trascinamento: function () {
conta [1] ++;
updateCounterStatus ($ drag_counter, conta [1]);
},
fermare: function () {
conta [2] ++;
updateCounterStatus ($ stop_counter, conta [2]);
}
});
funzionare updateCounterStatus ($ event_counter, NEW_COUNT) {
// Aggiornato primo stato visivo ...
if (! $ event_counter.hasClass ( "ui-stato-hover")) {
$ Event_counter.addClass ( "ui-stato-hover")
. .siblings () removeClass ( "ui-stato-hover");
}
// ... Quindi aggiornare i numeri $ ( "span.count", $ event_counter) .text (NEW_COUNT);
}
});
</ Script>
</ Head>
<Body>
<Div id = "trascinabile" class = "ui-widget di contenuto ui-widget di">
<P> Si prega di trascinarmi, innescando una catena di eventi. </ P>
<Ul class = "ui-helper-reset">
<Li id = "evento-start" class = "ui-stato-default ui-angolo-all"> <span class = "ui-icon ui-icon-play"> </ span> "start" si chiama <span class = "count"> 0 </ span> x </ li>
<Li id = "evento-trascinare" class = "ui-stato-default ui-angolo-all"> <span class = "ui-icon ui-icon-freccia-4"> </ span> "trascinare" si chiama <span class = "count"> 0 </ span> x </ li>
<Li id = "evento-stop" class = "ui-stato-default ui-angolo-all"> <span class = "ui-icon ui-icon-stop"> </ span> "stop" si chiama <span class = "count"> 0 </ span> x </ li>
</ Ul>
</ Div>
</ Corpo>
</ Html>
maniglie
È consentito solo quando la parte cursore specificato trascinare trascinabili. Utilizzare handle opzione per specificare l'elemento (o gruppo di elementi) del selettore jQuery per l'oggetto trascinato.
O quando l'elemento specificato cursore (o gruppo di elementi) nel trascinamento consentito trascinabile. Utilizzare handle opzione per specificare annullare la funzione di trascinamento del selettore jQuery.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI di trascinamento (Draggable) - Maniglie </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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: 0 10px 10px 0;}
p {#draggable cursore: spostare;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Maniglia: "p"});
$ ( "# Draggable2") .draggable ({annullare: "p.ui-widget di-header"});
$ ( "Div, p") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Div id = "trascinabile" class = "ui-widget di-content">
<P class = "ui-widget di-header"> Si può solo trascinare all'interno di questo intervallo I </ p>
</ Div>
<Div id = "draggable2" class = "ui-widget di-content">
<P> Puoi prendere in giro per trascinare & hellip; </ p>
<P class = "ui-widget di-header"> & hellip; ma non mi </ p> può trascinare in questo intervallo
</ Div>
</ Corpo>
</ Html>
posizione di ripristino
Come con valori booleani revert quando l'opzione trascinabili per fermare il trascinamento, tornare trascinabili (o il suo assistente) per la posizione originale.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI di trascinamento (Draggable) - Ripristinare posizione </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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: 0 10px 10px 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Revert: true});
$ ( "# Draggable2") .draggable ({ripristinare: vero, aiutante: "clone"});
});
</ Script>
</ Head>
<Body>
<Div id = "trascinabile" class = "ui-widget di-content">
<P> Ripristina </ p>
</ Div>
<Div id = "draggable2" class = "ui-widget di-content">
<P> Ripristina Assistant </ p>
</ Div>
</ Corpo>
</ Html>
Snap ad elementi di rete o
Allineare trascinabili elementi interni o esterni confini DOM. L'uso della snap , snapMode (interno, esterno, entrambi) e snapTolerance (quando si chiama in linea con la distanza tra gli elementi trascinabili in pixel) opzione.
Allinea alla Griglia o trascinabili. Con grid opzione per impostare le dimensioni delle celle della griglia (pixel altezza o larghezza).
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI di trascinamento (Draggable) - Allineamento agli elementi di griglia o </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em;}
.ui-widget di intestazione-p,-widget di contenuto .ui p {margin: 0;}
#snaptarget {height: 140px;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Snap: true});
$ ( "# Draggable2") .draggable ({SNAP: ".ui-widget di-header"});
$ ( "# Draggable3") .draggable ({SNAP: ".ui-widget di-header", SNAPMODE: "esterno"});
$ ( "# Draggable4") .draggable ({griglia: [20, 20]});
$ ( "# Draggable5") .draggable ({griglia: [80, 80]});
});
</ Script>
</ Head>
<Body>
<Div id = "snaptarget" class = "ui-widget di-header">
<P> Sono un obiettivo allineato </ p>
</ Div>
style="clear:both"> <br
<Div id = "trascinabile" class = "ui-widget di-contenuti trascinabili">
<P> default (SNAP: true), allineata a tutti gli altri elementi trascinabili </ p>
</ Div>
<Div id = "draggable2" class = "ui-widget di-contenuti trascinabili">
<P> Ho appena allineato al grande scatola </ p>
</ Div>
<Div id = "draggable3" class = "ui-widget di-contenuti trascinabili">
<P> Ho appena allineato al bordo esterno della grande scatola </ p>
</ Div>
<Div id = "draggable4" class = "ui-widget di-contenuti trascinabili">
<P> ho allineato a una griglia 20 x 20 </ p>
</ Div>
<Div id = "draggable5" class = "ui-widget di-contenuti trascinabili">
<P> ho allineato a una griglia di 80 x 80 </ p>
</ Div>
</ Corpo>
</ Html>
feedback visivo
Fornire un feedback per l'utente, come assistente per il modo in cui ha trascinato gli oggetti. helper opzione accetta valori 'originale' (con gli oggetti trascinabili cursore), 'clone' (con il cursore copia trascinabile), o una funzione restituisce l'elemento DOM (l'elemento durante un trascinamento del cursore sul display). Con l' opacity opzione controlla assistente trasparenza.
Per distinguere che è un trascinabile viene trascinato, lasciate trascinabili in movimento per mantenere la parte anteriore. Se trascinate, utilizzando zIndex opzione per impostare l'altezza del assistente z-index, o usare la stack opzione per garantire che quando si smette di trascinamento, l'ultimo viene trascinato voce compare in cima al gruppo con altri progetti sempre.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI di trascinamento (Draggable) - feedback visivo </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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, # draggable3, #SET div {width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
#draggable, # draggable2, # draggable3 {margin-bottom: 20px;}
#SET {clear: both; float: left; width: 368px; height: 120px;}
p {clear: both; margin: 0; padding: 1em 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Helper: "originale"});
$ ( "# Draggable2") .draggable ({opacità: 0.7, aiutante: "clone"});
$ ( "# Draggable3") .draggable ({
cursore: "muoversi",
cursorAt: {top: -12, rimasto: -20},
helper: function (evento) {
return $ ( "<div class = 'ui-widget di-header'> sono un aiuto </ div> custom");
}
});
$ ( "#SET Div") .draggable ({Stack: "#SET div"});
});
</ Script>
</ Head>
<Body>
<H3 class = "docs"> helper: </ h3>
<Div id = "trascinabile" class = "ui-widget di-content">
<P> originale </ p>
</ Div>
<Div id = "draggable2" class = "ui-widget di-content">
<P> traslucido clone </ p>
</ Div>
<Div id = "draggable3" class = "ui-widget di-content">
<P> assistente personalizzato (in collaborazione con cursorAt) </ p>
</ Div>
<H3 class = "doc"> pila: </ h3>
<Div id = "set">
<Div class = "ui-widget di-content">
<P> Siamo draggables .. </ p>
</ Div>
<Div class = "ui-widget di-content">
<P> .. è z-index è controllata automaticamente .. </ p>
</ Div>
<Div class = "ui-widget di-content">
<P> .. con opzioni di stack. </ P>
</ Div>
</ Div>
</ Corpo>
</ Html>
jQuery UI Draggable + ordinabili
Trascinabili e ordinabile di interazione senza soluzione di continuità.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI di trascinamento (Draggable) + Sort (ordinabili) </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
ul {list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px;}
li {margin: 5px; padding: 5px; width: 150px;}
</ Style>
<Script>
$ (Function () {
$ ( "#sortable") .sortable ({
tornare: true
});
$ ( "#draggable") .draggable ({
connectToSortable: "#sortable",
aiutante: "clone",
ritorna: "non valido"
});
$ ( "Ul, li") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul>
<Li id = "trascinabile" class = "ui-stato-highlight"> Si prega di trascinare me </ li>
</ Ul>
<Ul id = "ordinabile">
<Li class = "ui-stato-default"> Articolo 1 </ li>
<Li class = "ui-stato-default"> Articolo 2 </ li>
<Li class = "ui-stato-default"> Articolo 3 </ li>
<Li class = "ui-stato-default"> Articolo 4 </ li>
<Li class = "ui-stato-default"> Articolo 5 </ li>
</ Ul>
</ Corpo>
</ Html>