MooTools - przeciągnij i upuść
MooTools zapewnia niesamowitą funkcję, która pomaga dodawać funkcje przeciągania i upuszczania do elementów strony internetowej. Możemy to zrobić, tworząc własne noweDrag.Moveobiekt. Za pomocą tego obiektu możesz zdefiniować swoje opcje i zdarzenia. Klasy Drag and Drag.Move pochodzą z biblioteki MooTools More.
Omówmy opcje i zdarzenia obiektu Drag.Move.
Przeciągnij, przesuń
Drag.Move to obiekt używany do dodawania funkcji Drag and Drop do elementów HTML. Drag.Move rozszerza Drag, dzięki czemu możemy używać wszystkich opcji i zdarzeń klasy Drag przez obiekt Drag.Move. Spójrz na następującą składnię i zrozum, jak używać obiektu Drag.Move.
Składnia
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'));
}
});Opcje przeciągania i przesuwania
Drag.Move udostępnia następujące opcje utrzymywania elementów HTML za pomocą funkcji Drag and Drop -
droppable - Pomaga to ustawić selektor elementów, które można usuwać (elementy, które rejestrują się w zdarzeniach związanych z upuszczaniem).
container - Pomaga to ustawić kontener elementu przeciągania (utrzymuje element w środku).
snap- Pomaga to ustawić, o ile pikseli użytkownik musi przeciągnąć kursor, zanim przeciągany element zacznie się przeciągać. Wartość domyślna to 6 i można ustawić dowolną liczbę zmiennych reprezentujących liczbę.
handle- Pomaga to dodać uchwyt do elementu, który można przeciągać. Uchwyt staje się jedynym elementem, który zaakceptuje chwyt.
Zapoznaj się z następującą składnią, aby dowiedzieć się, jak i gdzie definiować elementy droppable i container, snap oraz handle.
Składnia
//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
});Przeciągnij i przenieś wydarzenia
Zdarzenia Drag.Move zapewniają różne funkcje, których można używać na różnych poziomach akcji. Na przykład, gdy zaczniesz przeciągać lub upuszczać obiekt, każde zdarzenie Drag.Move będzie przekazywać jako parametry przeciągnięty element lub upuszczony element.
Poniżej znajdują się obsługiwane wydarzenia -
onStart ()
To wywołuje wydarzenie na początku przeciągania. Jeśli ustawisz długie przyciąganie, to zdarzenie nie wzrośnie, dopóki mysz nie znajdzie się w pewnej odległości. Spójrz na następującą składnię.
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 ()
Powoduje to ciągłe wywoływanie zdarzenia podczas przeciągania elementu. Spójrz na następującą składnię.
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 ()
Wywołuje to zdarzenie, gdy upuścisz element do przeciągania do elementu do upuszczania. Spójrz na następującą składnię.
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 ()
Powoduje to zdarzenie, gdy element do przeciągania opuszcza granice elementu, który można upuszczać. Spójrz na następującą składnię.
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 ()
Powoduje to pojawienie się, gdy element, który można przeciągać, wchodzi do obszaru elementu, który można upuszczać. Spójrz na następującą składnię.
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 ()
To wywołuje wydarzenie. onComplete odnosi się do sytuacji, w której upuszczasz przedmiot do upuszczenia, i zwiększy to, czy wylądujesz w droppable, czy nie. Spójrz na następującą składnię.
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
}
});Weźmy przykład, który pozwoli zbadać wszystkie funkcje wyjaśnione w tym rozdziale. Funkcje to - Drag, Drag.Move, onEnter, onLeave, onDrop, onStart, onDrag i onComplete. W tym przykładzie zapewniamy jeden UCHWYT, za pomocą którego można przeciągnąć przeciągany obiekt w dowolne miejsce do kontenera. Dla każdej akcji po lewej stronie znajduje się powiadomienie (oznaczone kolorem niebieskim). W pojemniku znajduje się obszar, który można upuścić. Jeśli obiekt do przeciągania znajdzie się w obszarze do upuszczania, zostaną aktywowane trzy ostatnie wskaźniki. Spójrz na poniższy kod.
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>Otrzymasz następujące dane wyjściowe, w których musisz kliknąć Uchwyt i przeciągnij. Możesz teraz znaleźć wskazania powiadomień po lewej stronie.
Output