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.
  • Se viene assegnato un numero intero x, l'elemento trascinabile si aggancia a una griglia di x pixel.

  • Se una matrice [x, y], il trascinamento orizzontale si aggancia a una griglia di x pixel e la verticale si aggancia a y pixel.

  • Può anche essere una funzione conforme a Function (x, y, trascinabile) che restituisce un array [x, y].

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: