Перетягування будь-чого на HTML-сторінці
Часто перед веб-майстром постає завдання реалізувати перетягування (drag) елементів в межах сторінки.
З використанням фреймворку MooTools це завдання стає простим і впоратися з ним можна лише в декілька рядків JavaScript-коду.
Вже готову реалізацію перетягування елементів можна знайти в короткій, але дуже корисній статті «Ultra small code to drag everything in HTML pages».
Давайте подивимося, як виглядає HTML-код цього прикладу:
<div id="draggables">
<div>Тут трошки тексту...</div>
<div>Деякий текст тут...</div>
<div>... і ще текст ...</div>
</div>Як бачимо, він дуже простий.
Ви повинні додати основний DIV-елемент з ID, наприклад, «draggables», а в ньому покласти декілька DIV’ів.
Таким чином всі елементи, що містяться всередині DIV’а з ID рівним «draggables» будуть перетягуватися.
Тепер глянемо на JavaScript-код, який дозволить здійснювати перетягування. Перш за все слід підключити MooTools в тілі тегу <head>:
<script type="text/javascript" src="mootools.svn.js"></script>А після цього скопіюйте і вставте цей простий код:
<script type="text/javascript">
window.addEvent('domready', function(){
$('#draggables div').each(function(drag){
new Drag.Move(drag);
});
});
</script>Просто, чи не так? Таким чином, коли ви натиснете на DIV елемент, який міститься всередині DIV’а з ID рівним «draggables», то зможете його переміщувати в межах вікна браузера.
В прикладі з блоґу http://woork.blogspot.com/ використано DIV-елементи для демонстрації перетягування елементів, але ви можете також взяти будь-який інший тег (P, H1, UL, LI, …).
Єдине, що вам потрібно змінити в HTML-коді DIV на той тег, який ви оберете. Ось, тут
$('#draggables div').each(function(drag)Ви також можете задавати CSS-стилі для елементів, що перетягуються
<div id="draggables">
<div class="drag">Тут трошки тексту...</div>
<div class="drag">Деякий текст тут...</div>
<div class="drag">... і ще текст ...</div>
</div>і CSS код може виглядати якось так:
.drag {
border:solid 6px #DEDEDE;
background:#FFF;
width:200px;
height:150px;
}