MooTools - перетаскивание
MooTools предоставляет потрясающую функцию, которая помогает вам добавлять функции перетаскивания в элементы вашей веб-страницы. Мы можем сделать это, создав собственный новыйDrag.Moveобъект. Используя этот объект, вы можете определять свои опции и события. Классы Drag и Drag.Move взяты из библиотеки MooTools More.
Давайте обсудим параметры и события объекта Drag.Move.
Перетащить.
Drag.Move - это объект, используемый для добавления функции перетаскивания к элементам html. Drag.Move расширяет Drag, поэтому мы можем использовать все параметры и события класса Drag с помощью объекта Drag.Move. Взгляните на следующий синтаксис и поймите, как использовать объект Drag.Move.
Синтаксис
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'));
}
});Параметры перетаскивания.
Drag.Move предоставляет следующие параметры для поддержки элементов HTML с функциями перетаскивания:
droppable - Это поможет вам установить селектор отбрасываемых элементов (элементов, которые регистрируются в событиях, связанных с удалением).
container - Это поможет вам установить контейнер элемента перетаскивания (удерживает элемент внутри).
snap- Это поможет вам установить, на сколько пикселей пользователь должен перетащить курсор, прежде чем перетаскиваемый элемент начнет перетаскивать. По умолчанию - 6, и вы можете установить любое количество переменных, представляющих число.
handle- Это поможет вам добавить дескриптор к перетаскиваемому элементу. Ручка становится единственным элементом, который примет захват.
Взгляните на следующий синтаксис, чтобы узнать, как и где определять отбрасываемые элементы и элементы контейнера, привязки и дескриптора.
Синтаксис
//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
События Drag.Move предоставляют разные функции, которые можно использовать на разных уровнях действия. Например, когда вы начинаете перетаскивать объект, каждое событие Drag.Move будет передавать перетаскиваемый элемент или отброшенный элемент в качестве параметров.
Следующие поддерживаемые события -
onStart ()
Это вызывает событие в начале перетаскивания. Если вы установите длинную привязку, то это событие не будет возникать, пока мышь не окажется на расстоянии. Взгляните на следующий синтаксис.
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 ()
Это вызывает событие постоянно, пока вы перетаскиваете элемент. Взгляните на следующий синтаксис.
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 ()
Это вызывает событие, когда вы перетаскиваете перетаскиваемый элемент в удаляемый элемент. Взгляните на следующий синтаксис.
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 ()
Это вызывает событие, когда перетаскиваемый элемент покидает границы удаляемого элемента. Взгляните на следующий синтаксис.
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 ()
Это возникает, когда перетаскиваемый элемент входит в область перетаскиваемого элемента. Взгляните на следующий синтаксис.
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 ()
Это вызывает событие. onComplete относится к тому, когда вы бросаете сбрасываемый объект, и он будет подниматься независимо от того, приземлились ли вы в сбрасываемый объект. Взгляните на следующий синтаксис.
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
}
});Давайте рассмотрим пример, который исследует все функции, описанные в этой главе. Возможности: Drag, Drag.Move, onEnter, onLeave, onDrop, onStart, onDrag и onComplete. В этом примере мы предоставляем одну РУЧКУ, с помощью которой вы можете перетащить перетаскиваемый объект в любое место контейнера. Для каждого действия слева есть уведомление (обозначено синим цветом). В контейнере есть место для сброса. Если перетаскиваемый объект попадает в область перетаскивания, активируются последние три индикатора. Взгляните на следующий код.
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>Вы получите следующий результат, в котором вам нужно щелкнуть «Обработать» и перетащить его. Теперь вы можете найти индикаторы уведомлений с левой стороны.
Output