MooTools - Drag and Drop

MooTools fornisce una straordinaria funzionalità che ti aiuta ad aggiungere funzionalità di trascinamento della selezione agli elementi della tua pagina web. Possiamo farlo creando il nostro nuovoDrag.Moveoggetto. Usando questo oggetto, puoi definire le tue opzioni ed eventi. Le classi Drag and Drag.Move provengono dalla libreria MooTools More.

Parliamo delle opzioni e degli eventi dell'oggetto Drag.Move.

Drag.Move

Drag.Move è un oggetto utilizzato per aggiungere la funzionalità Drag and Drop agli elementi html. Drag.Move estende Drag, quindi possiamo usare tutte le Opzioni e gli eventi della classe Drag tramite l'oggetto Drag.Move. Dai un'occhiata alla seguente sintassi e comprendi come utilizzare l'oggetto Drag.Move.

Sintassi

var myDrag = new Drag.Move(dragElement, {
   // Drag.Move Options
   droppables: dropElement,
   container: dragContainer,
   
   // Drag Options
   handle: dragHandle,

   // Drag.Move Events
   // the Drag.Move events pass the dragged element,
   // and the dropped into droppable element
   onDrop: function(el, dr) {
      //will alert the id of the dropped into droppable element
      alert(dr.get('id'));
   },
   // Drag Events
   // Drag events pass the dragged element
   onComplete: function(el) {
      alert(el.get('id'));
   }
});

Opzioni di trascinamento

Drag.Move fornisce le seguenti opzioni per mantenere gli elementi html con le funzionalità di trascinamento della selezione:

droppable - Questo ti aiuta a impostare il selettore degli elementi trascinabili (gli elementi che si registrano sugli eventi relativi al rilascio).
container - Questo ti aiuta a impostare il contenitore dell'elemento di trascinamento (mantiene l'elemento all'interno).
snap- Questo ti aiuta a impostare quanti px l'utente deve trascinare il cursore prima che l'elemento trascinabile inizi a trascinare. Il valore predefinito è 6 e puoi impostarlo su qualsiasi numero di variabili che rappresentano un numero.
handle- Questo ti aiuta ad aggiungere una maniglia al tuo elemento trascinabile. La maniglia diventa l'unico elemento che accetterà la presa.

Dai un'occhiata alla seguente sintassi per sapere come e dove definire gli elementi droppable e container, snap e handle.

Sintassi

//here we define a single element by id
var dragElement = $('drag_element');

//here we define an array of elements by class
var dropElements = $$('.drag_element');
var dragContainer = $('drag_container');
var dragHandle = $('drag_handle');

//now we set up our Drag.Move object
var myDrag = new Drag.Move(dragElement , {
   // Drag.Move Options
   // set up our droppables element with the droppables var we defined above
   droppables: dropElements ,
   
   // set up our container element with the container element var
   container: dragContainer
   
   // set up pixels the user must drag.
   Snap: 10
   
   // Adds a handle to your draggable element
   handle: dragHandle
});

Drag.Move eventi

Gli eventi Drag.Move forniscono diverse funzioni che possono essere utilizzate in diversi livelli dell'azione. Ad esempio, quando inizi a trascinare o rilasciare un oggetto, ogni evento Drag.Move passerà l'elemento trascinato o l'elemento rilasciato come parametri.

Di seguito sono riportati gli eventi supportati:

onStart ()

Ciò genera un evento all'inizio del trascinamento. Se imposti uno snap lungo, questo evento non viene generato finché il mouse non si trova a una certa distanza. Dai un'occhiata alla seguente sintassi.

Syntax

var myDrag = new Drag.Move(dragElement , {
   // Drag options will pass the dragged element as a parameter
   onStart: function(el) {
      // put whatever you want to happen on start in here
   }
});

onDrag ()

Ciò solleva un evento continuamente mentre stai trascinando un elemento. Dai un'occhiata alla seguente sintassi.

Syntax

var myDrag = new Drag.Move(dragElement , {
   // Drag options will pass the dragged element as a parameter
   onDrag: function(el) {
      // put whatever you want to happen on drag in here
   }
});

onDrop ()

Ciò genera un evento quando si rilascia l'elemento trascinabile in un elemento trascinabile. Dai un'occhiata alla seguente sintassi.

Syntax

var myDrag = new Drag.Move(dragElement , {
   // It will pass the draggable element ('el' in this case)
   // and the droppable element the draggable is interacting with ('dr' here)
   onDrop: function(el, dr) {
      // put whatever you want to happen on drop in here
   }
});

in ferie()

Questo genera un evento quando un elemento trascinabile lascia i limiti di un elemento trascinabile. Dai un'occhiata alla seguente sintassi.

Syntax

var myDrag = new Drag.Move(dragElement , {
   // It will pass the draggable element ('el' in this case)
   // and the droppable element the draggable is interacting with ('dr' here)
   onLeave: function(el, dr) {
      // put whatever you want to happen on Leave from droppable area in here
   }
});

onEnter ()

Ciò si verifica quando un elemento trascinabile entra in un'area di elementi trascinabili. Dai un'occhiata alla seguente sintassi.

Syntax

var myDrag = new Drag.Move(dragElement , {
   // It will pass the draggable element ('el' in this case)
   // and the droppable element the draggable is interacting with ('dr' here)
   onEnter: function(el, dr) {
      // this will fire when a draggable enters a droppable element
   }
});

onComplete ()

Ciò solleva un evento. onComplete si riferisce a quando lasci cadere un droppable e aumenterà se atterri o meno in un droppable. Dai un'occhiata alla seguente sintassi.

Syntax

var myDrag = new Drag.Move(dragElement , {
   // Drag Options
   // Drag options will pass the dragged element as a parameter
   onComplete: function(el) {
      // put whatever you want to happen on complete
   }
});

Facciamo un esempio che esplorerà tutte le funzionalità spiegate in questo capitolo. Le funzionalità sono: Drag, Drag.Move, onEnter, onLeave, onDrop, onStart, onDrag e onComplete. In questo esempio, forniamo un HANDLE, utilizzandolo per trascinare l'oggetto trascinabile ovunque nel contenitore. Per ogni azione, c'è una notifica sul lato sinistro (indicato in colore blu). C'è un'area Droppable nel container. Se l'oggetto trascinabile entra nell'area trascinabile, vengono attivati gli ultimi tre indicatori. Dai un'occhiata al seguente codice.

Example

<!DOCTYPE html>
<html>

   <head>
      <style>
         /* this is generally a good idea */
         body {
            margin: 0;
            padding: 0;
         }
         
         /* make sure the draggable element has "position: absolute"
         and then top and left are set for the start position */
         #drag_me {
            width: 100px;
            height: 100px;
            background-color: #333;
            position: absolute;
            top: 0;
            left: 0;
         }
         #drop_here {
            width: 80%;
            height: 200px;
            background-color: #eee;
            margin-left: 100px;
            margin-top: -200px !important;
         }
         /* make sure the drag container is set with position relative */
         #drag_cont {
            background-color: #ccc;
            height: auto;
            width: 500px;
            position:relative;
            margin-top: 20px;
            margin-left: 20px;
            margin-bottom: auto;
         }
         #drag_me_handle {
            width: 100%;
            height: auto;
            background-color: #F5B041;
         }
         #drag_me_handle span {
            display: block;
            padding: 20px;
         }
         .indicator {
            width: 100px;
            height: auto;
            background-color: #0066FF;
            border-bottom: 1px solid #eee;
         }
         .indicator span {
            padding: 10px;
            display: block;
         }
         .draggable {
            width: 200px;
            height: 200px;
            background-color: blue;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var dragElement = $('drag_me');
            var dragContainer = $('drag_cont');
            var dragHandle = $('drag_me_handle');
            var dropElement = $$('.draggable');
            var startEl = $('start');
            var completeEl = $('complete');
            var dragIndicatorEl = $('drag_ind');
            var enterDrop = $('enter');
            var leaveDrop = $('leave');
            var dropDrop = $('drop_in_droppable');
            
            var myDrag = new Drag.Move(dragElement, {
               // Drag.Move options
               droppables: dropElement,
               container: dragContainer,
               
               // Drag options
               handle: dragHandle,
               
               // Drag.Move Events
               onDrop: function(el, dr) {
                  if (!dr) { }else {
                     dropDrop.highlight('#FB911C'); //flashes orange
                     el.highlight('#fff'); //flashes white
                     dr.highlight('#667C4A'); //flashes green
                  };
               },
               onLeave: function(el, dr) {
                  leaveDrop.highlight('#FB911C'); //flashes orange
               },
               onEnter: function(el, dr) {
                  enterDrop.highlight('#FB911C'); //flashes orange
               },
               
               // Drag Events
               onStart: function(el) {
                  startEl.highlight('#FB911C'); //flashes orange
               },
               onDrag: function(el) {
                  dragIndicatorEl.highlight('#FB911C'); //flashes orange
               },
               onComplete: function(el) {
                  completeEl.highlight('#FB911C'); //flashes orange
               }
            });
         });
      </script>
   </head>
   
   <body>
   
      <p align = "center">Drag and Drop Application</p>
      <div id = "drag_cont">
         <div id = "start" class = "indicator"><span>Start</span></div>
         <div id = "drag_ind" class = "indicator"><span>Drag</span></div>
         <div id = "complete" class = "indicator"><span>Complete</span></div>
         <div id = "enter" class = "indicator"><span>Enter Droppable Element</span></div>
         <div id = "leave" class = "indicator"><span>Leave Droppable Element</span></div>
         
         <div id = "drop_in_droppable" class = "indicator">
            <span>Dropped in Droppable Element</span>
         </div>
         
         <div id = "drag_me">
            <div id = "drag_me_handle"><span>HANDLE</span></div>
         </div>
         
         <div id = "drop_here" class = "draggable">
            <p align = "center">Droppable Area</p>
         </div>
         
      </div>
   </body>
   
</html>

Riceverai il seguente output in cui, devi fare clic su Gestisci e trascinarlo. Ora puoi trovare le indicazioni di notifica sul lato sinistro.

Output

↰ Previous page Next page ↱

MooTools - Drag and Drop

Drag.Move

Sintassi

Opzioni di trascinamento

Sintassi

Drag.Move eventi

onStart ()

onDrag ()

onDrop ()

in ferie()

onEnter ()

onComplete ()

Tutorial MooTools