MooTools - Arrastar e soltar
MooTools fornece um recurso incrível que ajuda você a adicionar funcionalidades de arrastar e soltar aos elementos de sua página da web. Podemos fazer isso criando nosso próprio novoDrag.Moveobjeto. Usando este objeto, você pode definir suas opções e eventos. As classes Drag and Drag.Move são da biblioteca MooTools More.
Vamos discutir as opções e eventos do objeto Drag.Move.
Drag.Move
Drag.Move é um objeto usado para adicionar o recurso de arrastar e soltar aos elementos html. Drag.Move estende Drag, então podemos usar todas as opções e eventos da classe Drag pelo objeto Drag.Move. Dê uma olhada na sintaxe a seguir e entenda como usar o objeto Drag.Move.
Sintaxe
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'));
}
});Opções de Drag.Move
Drag.Move fornece as seguintes opções para manter elementos html com recursos de arrastar e soltar -
droppable - Isso ajuda a definir o seletor de elementos soltáveis (os elementos que se registram em eventos relacionados a soltar).
container - Isso ajuda a definir o contêiner do elemento de arrastar (mantém o elemento dentro).
snap- Isso ajuda a definir quantos px o usuário deve arrastar o cursor antes que o elemento arrastável comece a arrastar. O padrão é 6 e você pode defini-lo para qualquer número de variável que represente um número.
handle- Isso ajuda você a adicionar uma alça ao seu elemento arrastável. O identificador se torna o único elemento que aceitará a captura.
Dê uma olhada na sintaxe a seguir para saber como e onde definir os elementos droppable e container, snap e handle.
Sintaxe
//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
});Eventos Drag.Move
Os eventos Drag.Move fornecem diferentes funções que podem ser usadas em diferentes níveis da ação. Por exemplo, quando você começa a arrastar ou soltar um objeto, cada evento Drag.Move passará o elemento arrastado ou o elemento solto como parâmetros.
A seguir estão os eventos suportados -
onStart ()
Isso gera um evento no início do arrasto. Se você definir um snap longo, este evento não aumentará até que o mouse esteja à distância. Dê uma olhada na seguinte sintaxe.
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 ()
Isso gera um evento continuamente enquanto você arrasta um elemento. Dê uma olhada na seguinte sintaxe.
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 ()
Isso gera um evento quando você solta o elemento arrastável em um elemento soltável. Dê uma olhada na seguinte sintaxe.
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
}
});onLeave ()
Isso gera um evento quando um elemento arrastável sai dos limites de um elemento soltável. Dê uma olhada na seguinte sintaxe.
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 ()
Isso ocorre quando um elemento arrastável entra em uma área de elemento soltável. Dê uma olhada na seguinte sintaxe.
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 ()
Isso gera um evento. onComplete refere-se a quando você solta um droppable, e aumentará se você cair em um droppable ou não. Dê uma olhada na seguinte sintaxe.
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
}
});Tomemos um exemplo que irá explorar todos os recursos explicados neste capítulo. Os recursos são - Drag, Drag.Move, onEnter, onLeave, onDrop, onStart, onDrag e onComplete. Neste exemplo, estamos fornecendo um HANDLE, com o qual você pode arrastar o objeto arrastável para qualquer lugar do contêiner. Para cada ação, há uma notificação no lado esquerdo (indicada na cor azul). Há uma área para soltar no contêiner. Se o objeto arrastável entrar na área de soltar, os três últimos indicadores serão ativados. Dê uma olhada no código a seguir.
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>Você receberá a seguinte saída em que deve clicar em Handle and Drag it. Agora você pode encontrar as indicações de notificação no lado esquerdo.
Output