Drag-and-drop (в переводе с английского означает буквально тащи-и-бросай; Бери-и-Брось) — способ оперирования элементами интерфейса в интерфейсах пользователя (как графическим, так и текстовым, где элементы GUI реализованы при помощи псевдографики) при помощи манипулятора «мышь» или сенсорного экрана.
Drag’n’Drop – это возможность захватить мышью элемент и перенести его. В свое время это было замечательным открытием в области интерфейсов, которое позволило упростить большое количество операций. Подобный способ можно часто встретить на сайтах элитных интернет-магазинов, где для того чтобы купить товар, его нужно "захватить" и перенести к себе в корзину. На упрощенных сайтах, чтобы купить товар нужно просто кликнуть в определенном месте или поставить галочку и товар сам перенесется в вашу корзинку, но согласитесь, сейчас это уже не столь современно. Перенос мышкой смог заменить целую последовательность кликов. И, самое главное, он упрощает внешний вид интерфейса: функции, реализуемые через Drag’n’Drop, в ином случае потребовали бы дополнительных полей, виджетов и т.п.
И так, давайте рассмотрим самый простой способ установки DnD при помощи CSS и JavaScript.
CSS
.drag_obj { position:absolute; cursor:move; text-align:center; z-index:999;}
Разберем подробнее. Весь наш блок будет основан на классе .drag_obj, которому мы присвоили ряд свойств: абсолютное позиционирование, захват курсора и свойство z-index, необходимое нам только в том случае, когда мы хотим перекрыть несколько других блоков и поставить новый блок поверх них.
Переходим к разметке, здесь всё просто.
HTML
<span class="drag_obj" onmousedown="drag_object(event, this)">здесь размещаем картинку, блок или еще что-нибудь</span>
Ну и последний элемент - это библиотека. Здесь у нас тоже всё довольно просто и подробно расписано.
Алгоритм Drag’n’Drop
Основной алгоритм Drag’n’Drop выглядит так:
- Отслеживаем нажатие кнопки мыши на переносимом элементе при помощи события mousedown.
- При нажатии – подготовить элемент к перемещению.
- Далее отслеживаем движение мыши через mousemove и передвигаем переносимый элемент на новые координаты путём смены left/top и position:absolute.
- При отпускании кнопки мыши, то есть наступлении события mouseup – остановить перенос элемента и произвести все действия, связанные с окончанием Drag’n’Drop.
JS
function drag_object( evt, obj )
{
evt = evt || window.event;
// готовность к перетаскиванию
obj.clicked = true;
// устанавливаем первоначальные значения координат объекта
obj.mousePosX = evt.clientX;
obj.mousePosY = evt.clientY;
// отключаем обработку событий по умолчанию
if( evt.preventDefault ) evt.preventDefault();
else evt.returnValue = false;
// когда мы отпускаем кнопку мыши, убираем «проверочный флаг»
document.onmouseup = function(){ obj.clicked = false }
// обработка координат указателя
document.onmousemove = function( evt )
{
evt = evt || window.event;
if( obj.clicked )
{
posLeft = !obj.style.left ? obj.offsetLeft : parseInt( obj.style.left );
posTop = !obj.style.top ? obj.offsetTop : parseInt( obj.style.top );
mousePosX = evt.clientX;
mousePosY = evt.clientY;
obj.style.left = posLeft + mousePosX - obj.mousePosX + 'px';
obj.style.top = posTop + mousePosY - obj.mousePosY + 'px';
obj.mousePosX = mousePosX;
obj.mousePosY = mousePosY;
}
}
}
function setcookie( name, value, timeout )
{
timeout = timeout || 1000*60*60*24;
expires = (new Date((new Date).getTime() + timeout)).toUTCString();
document.cookie = name + '=' + value + ';expires=' + expires;
}
Отличия от HTML5 Drag’n’Drop
В современном стандарте HTML5 есть поддержка Drag’n’Drop при помощи специальных событий. Эти события поддерживаются всеми современными браузерами и у них есть свои интересные особенности, например, можно перетащить файл в браузер, так что JS получит доступ к его содержимому. Но в плане именно Drag’n’Drop у них есть существенные ограничения. Например, нельзя организовать перенос «только по горизонтали» или «только по вертикали». Также нельзя ограничить перенос внутри заданной зоны.
Есть и другие интерфейсные задачи, которые такими встроенными событиями реализовать невозможно, поэтому здесь мы рассматривали только Drag’n’Drop при помощи событий мыши. Рассматриваемые приёмы в общем-то применяются не только в Drag’n’Drop, но и для любых интерфейсных взаимодействий вида «захватить – потянуть – отпустить». Они заслуживают отдельного рассмотрения.
Если Вам понравился данный материал и/или вы нашли способ его применения на своем сайте, не забудьте рассказать о нем в комментариях и поделиться с друзьями, нажав на кнопки социальных сетей. Желаем вам удачи и побольше творческих идей.
View demo |
Понравился материал? Поделитесь с друзьями |
С этим материалом смотрят: Похожие материалы не найдены
Feedback: 1 | |
Inditorc 10/01/2017 18:011
0
материал
| |