script.aculo.us - Drag & Drop
La caratteristica più popolare dell'interfaccia Web 2.0 è la funzione di trascinamento della selezione. Fortunatamente script.aculo.us viene fornito con una capacità intrinseca di supportare il drag and drop.
Per utilizzare le funzionalità di trascinamento di script.aculo.us, è necessario caricare il file dragdrop modulo, che richiede anche il effectsmodulo. Quindi il tuo caricamento minimo per script.aculo.us sarà simile a questo:
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>Trascinando le cose in giro
È molto semplice rendere un elemento trascinabile utilizzando script.aculo.us. Richiede la creazione di un'istanza della classe Draggable e l'identificazione dell'elemento da rendere trascinabile.
Sintassi trascinabile
new Draggable( element, options );Il primo parametro del costruttore identifica l'elemento da rendere trascinabile come id dell'elemento o come riferimento all'elemento. Il secondo parametro specifica le informazioni facoltative su come deve comportarsi l'elemento trascinabile.
Opzioni trascinabili
È possibile utilizzare una o più delle seguenti opzioni durante la creazione dell'oggetto trascinabile.
| Opzione | Descrizione | Esempi |
|---|---|---|
| ripristinare | Se impostato su true , l'elemento torna alla sua posizione originale al termine del trascinamento. Specifica anche se la richiamata reverteffect verrà invocata quando l'operazione di trascinamento si interrompe. Il valore predefinito è false . | Esempio |
| scatto | Utilizzato per far sì che un elemento trascinabile si agganci a una griglia o per vincolarne il movimento. Se false (impostazione predefinita), non si verificano snap o vincoli.
|
Esempio |
| zindex | Specifica lo z-index CSS da applicare all'elemento durante un'operazione di trascinamento. Per impostazione predefinita, lo z-index dell'elemento è impostato su 1000 durante il trascinamento. | Esempio |
| ghosting | Booleano che determina se il trascinabile deve essere clonato per il trascinamento, lasciando l'originale in posizione fino a quando il clone non viene rilasciato. Il valore predefinito è false . | Esempio |
| vincolo | Una stringa utilizzata per limitare le direzioni trascinabili, orizzontali o verticali . Il valore predefinito è null che significa libera circolazione. | Esempio |
| maniglia | Specifica un elemento da utilizzare come maniglia per avviare l'operazione di trascinamento. Per impostazione predefinita, un elemento è il proprio handle. | Esempio |
| starteffect | Un effetto richiamato sull'elemento durante il trascinamento inizia. Per impostazione predefinita, cambia l'opacità dell'elemento a 0,2 in 0,2 secondi. | Esempio |
| reverteffect | Un effetto richiamato sull'elemento quando il trascinamento viene annullato. Il valore predefinito è una diapositiva uniforme nella posizione originale dell'elemento. Chiamato solo se il ripristino è vero. | Esempio |
| endeffect | Un effetto richiamato sull'elemento durante il trascinamento termina. Per impostazione predefinita, cambia l'opacità dell'elemento a 1,0 in 0,2 secondi. | Esempio |
Opzioni di richiamata
Inoltre, è possibile utilizzare una delle seguenti funzioni di callback nel parametro delle opzioni:
| Funzione | Descrizione | Esempi |
|---|---|---|
| onStart | Chiamato quando viene avviato un trascinamento. | Esempio |
| onDrag | Chiamato ripetutamente quando un mouse si sposta, se la posizione del mouse cambia rispetto alla chiamata precedente. | Esempio |
| modificare | Chiamato proprio come onDrag (che è il callback preferito). | Esempio |
| alla fine | Chiamato quando un trascinamento è terminato. | Esempio |
Ad eccezione del callback "change", ciascuno di questi callback accetta due parametri: l'oggetto trascinabile e l'oggetto evento del mouse.
Esempio trascinabile
Qui definiamo 5 elementi che sono resi trascinabili: tre elementi <div>, un elemento <img> e un elemento <span>. Lo scopo dei tre diversi elementi <div> è dimostrare che indipendentemente dal fatto che un elemento inizi con una regola di posizionamento statica (predefinita), relativa o assoluta, il comportamento di trascinamento non viene influenzato.
<html>
<head>
<title>Draggables Elements</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
// Take all the elements whatever you want to make Draggable.
var elements = ['normaldiv', 'relativediv', 'absolutediv', 'image', 'span'];
// Make all the items drag able by creating Draggable objects
window.onload = function() {
elements.each(function(item) { new Draggable(item, {});});
}
</script>
</head>
<body>
<div id = "normaldiv">
This is a normal div and this is dragable.
</div>
<div id = "relativediv" style="position: relative;">
This is a relative div and this is dragable.
</div>
<div id = "absolutediv" style="position: absolute;">
This is an absolute div and this dragable.
</div>
<br />
<img id = "image" src = "/images/scriptaculous.gif"/>
<p>Let part <span id = "span" style = "color: blue;">
This is middle part</span> Yes, only middle part is dragable.</p>
</body>
</html>Questo produrrà il seguente risultato:
Eliminazione di oggetti trascinati
Un elemento viene convertito in una destinazione di rilascio tramite una chiamata al metodo add () all'interno di uno spazio dei nomi chiamato Droppables .
Lo spazio dei nomi Droppables ha due metodi importanti: add () per creare un obiettivo di rilascio e remove () per rimuovere un obiettivo di rilascio.
Sintassi
Ecco la sintassi del metodo add () per creare un obiettivo di rilascio. Il metodo add () crea una destinazione di rilascio dall'elemento passato come primo parametro, utilizzando le opzioni nell'hash passato come secondo.
Droppables.add( element, options );La sintassi per remove () è ancora più semplice. Il metodo remove () rimuove il comportamento dell'obiettivo di rilascio dall'elemento passato.
Droppables.remove(element);Opzioni
È possibile utilizzare una o più delle seguenti opzioni durante la creazione dell'oggetto trascinabile.
| Opzione | Descrizione | Esempi |
|---|---|---|
| Hoverclass | Il nome di una classe CSS che verrà aggiunta all'elemento mentre il droppable è attivo (ha un passaggio trascinabile accettabile su di esso). Il valore predefinito è null. | Esempio |
| Accettare | Una stringa o un array di stringhe che descrivono le classi CSS. Il droppable accetterà solo i trascinabili che hanno una o più di queste classi CSS. | Esempio |
| Contenimento | Specifica un elemento o una matrice di elementi che deve essere un elemento padre di un elemento trascinabile affinché possa essere accettato dalla destinazione di rilascio. Per impostazione predefinita, non vengono applicati vincoli di contenimento. | Esempio |
| Sovrapposizione | Se impostato su "orizzontale" o "verticale", il trascinabile reagirà solo a un trascinabile se si sovrappone di oltre il 50% nella direzione data. Usato da Sortables, discusso nel prossimo capitolo. | |
| avido | Se true (predefinito), smette di passare il mouse su altri droppabili, sotto il trascinabile non verrà eseguita la ricerca. | Esempio |
Opzioni di richiamata
Inoltre, è possibile utilizzare una delle seguenti funzioni di callback nel parametro delle opzioni:
| Funzione | Descrizione | Esempi |
|---|---|---|
| onHover | Specifica una funzione di callback che viene attivata quando un elemento trascinabile adatto passa sopra la destinazione di rilascio. Usato da Sortables, discusso nel prossimo capitolo. | |
| onDrop | Specifica una funzione di callback che viene chiamata quando un elemento trascinabile adatto viene rilasciato sulla destinazione di rilascio. | Esempio |
Esempio
Qui, la prima parte di questo esempio è simile al nostro esempio precedente, tranne per il fatto che abbiamo usato la pratica funzione $ A () di Prototype per convertire un elenco di nodi di tutti gli elementi <img> nell'elemento con l'id di trascinabili in un array .
<html>
<head>
<title>Drag and Drop Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
// Make all the images draggables from draggables division.
$A($('draggables').getElementsByTagName('img')).each(function(item) { new Draggable(item, {revert: true, ghosting: true}); }); Droppables.add('droparea', {hoverclass: 'hoverActive', onDrop: moveItem}); // Set drop area by default non cleared. $('droparea').cleared = false;
}
// The target drop area contains a snippet of instructional
// text that we want to remove when the first item
// is dropped into it.
function moveItem( draggable,droparea){
if (!droparea.cleared) {
droparea.innerHTML = '';
droparea.cleared = true;
}
draggable.parentNode.removeChild(draggable);
droparea.appendChild(draggable);
}
</script>
<style type = "text/css">
#draggables {
width: 172px;
border: 3px ridge blue;
float: left;
padding: 9px;
}
#droparea {
float: left;
margin-left: 16px;
width: 172px;
border: 3px ridge maroon;
text-align: center;
font-size: 24px;
padding: 9px;
float: left;
}
.hoverActive {
background-color: #ffffcc;
}
#draggables img, #droparea img {
margin: 4px;
border:1px solid red;
}
</style>
</head>
<body>
<div id = "draggables">
<img src = "/images/html.gif"/>
<img src = "/images/css.gif"/>
<img src = "/images/xhtml.gif"/>
<img src = "/images/wml_logo.gif"/>
<img src = "/images/javascript.gif"/>
</div>
<div id = "droparea">
Drag and Drop Your Images in this area
</div>
</body>
</html>Questo produrrà il seguente risultato: