Что такое Drag and Drop Interface. Технология Drag and Drop в Android События drag and drop
Проще всего что-то взять и положить, чем писать, что нужно взять и куда положить. Конечно без мышки, или подобного ей устройства, ничего не выберешь и ничего не укажешь, но даже в текущем положении вещей использование идеи «drag and drop» очень естественно и комфортно.
Область применения идеи - далеко не только интернет-магазины, электронные библиотеки, поисковые или информационные системы, а и прикладная сфера. Идея очень даже применима в разработке сайтов и их элементов, создаваемых и сопровождаемых интерактивно, без участия программиста.
Описание идеиВыбрать, переместить и положить - идея естественная и удобная. Просто удивительно, что она не родилась, когда мышка стала незаменимым аксессуаром компьютера.
Самый очевидный пример - выбор товара в интернет-магазине. Взять мышкой нужный товар и перетащить его в корзину для покупок - просто, естественно и удобно. Загрузка файлов: взять документ за пределами окна браузера и положить его на элемент страницы, инициировав тем самым передачу документа на сервер - также практичная идея.
Для разработчика идея «drag and drop» - это манипулирование элементами страницы без ручного пересчета координат и размеров тегов, возможность выбора нескольких элементов и выравнивания их, а также перемещения сторон блочных тегов.
HTML и CSS - отличные языки описания тегов и стилей их оформления, но когда разработчик имеет возможность интерактивно манипулировать элементами страницы без ручного пересчета координат и размеров, это делает работу более комфортной и эффективной.
Простой перенос файлов«Drag and drop»: перевод с английского на русский буквально звучит «тащи и бросай». На практике это звучит и действует лучше: выбрал, перенес и отпустил - просто и естественно.
Реализовать на странице передачу файлов на страницу, на сервер или для иного использования очень просто.
В данном примере мышкой было выбрано несколько файлов на рабочем столе (левый рисунок). На выделении была нажата левая кнопка мышки и выбранное «поехало» в корзинку. Браузер сам показал, как это происходит, написал подсказку «копирование» и вокруг создал контуры перемещаемых файлов.
Когда мышка оказалась над корзинкой, посетитель отпустил левую кнопку мышки, событие «тащи и бросай» состоялось и на странице сайта (нижний рисунок) JavaScript-код смог получить и обработать все файлы, которые посетитель предоставил странице (сайту).
Код, который выполняет эту процедуру, очень прост. Его повторить в любых вариантах использования может даже начинающий разработчик.
Здесь интерфейс пользователя представлен двумя тегами: scPlaceFile (это сама корзинка, куда нужно положить файлы) и scPlaceFiles (это результат обработки файлов, в данном случае их список).
Логика работы страницы такова. При загрузке страницы в браузере в корзинке назначается обработчик события «ondrop» - положить, остальные события блокируются и не используются.
Страница работает в штатном режиме, но как только посетитель выберет файл (файлы) и перетащит их на картинку корзинки, то есть на тег scPlaceFile, будет запущена обработка события «файлы приехали».
Данный обработчик просто выводит список файлов. Их количество находится в event.dataTransfer.files.length, а информация о каждом файле в event.dataTransfer.files[i].name. Что делать с полученными данными, определяет разработчик, в данном случае просто формируется список полученных файлов.
После обработки событие блокируется и не распространяется. Это необходимо, чтобы браузер не занимался самодеятельностью и не вмешивался в процесс обработки полученной информации.
DnD и внешние данныеЗагрузка изображений на сервер в «drag and drop» - обычная практика применения этой технологии. Как правило, разработчик создает форму для загрузки файла (1), которая работает обычным образом (2). Посетитель может в обычном режиме выбирать файлы и загружать их.
Однако если посетитель на определенное место формы сделает «drag and drop», то поле имени файла (файлов) заполнится автоматически.
Это хорошее решение. Допустить, что на компьютере нет мышки, конечно, очень трудно. Но лучше разработать интерфейс пользователя в обычном варианте и в DnD-реализации.
DnD и внутренние данныеЗабота об интересах посетителя всегда важна, но проблемы разработчика также имеют значение. Реализовать «drag and drop» можно не только стандартными средствами, но и посредством обработки событий мышки на элементах страницы.
Задача расчета значений координат тегов и их размеров возникает постоянно. Ручной расчет - хорошая практика, но интерактивный вариант более удобен. Все теги всегда имеют прямоугольную форму и, отслеживая «мышиные» события на сторонах элементов, можно создать возможность автоматического перемещения элементов в нужное место страницы, либо изменения их.
Обработка события нажатия кнопки мышки - запоминание координат места клика, например, одной из сторон элемента. Перемещение мышки - сторона перемещается в нужном направлении. Отпускание кнопки мышки - сторона останавливается, а ее координаты изменяются. Так можно изменить положение элемента или его размер.
Формально это не «drag and drop», но эффект аналогичный и практичный. Сделав универсальные обработчики для любого элемента страницы, можно получить хороший интерактивный результат, ускорить разработку и упростить код.
Визуальное и ручное программированиеМышка на компьютере и пальцы на смартфоне - совершенно разные подходы к реализации интерфейса пользователя (посетитель, разработчик). Является вполне естественным и современным требование кроссбраузерности.
Все это в совокупности усложняет создание страниц, но применяя идею «drag and drop» в ее стандартной форме, используя ее события, совмещая эту идею с обычными событиями на элементах, можно реализовать механизм, при котором создание страницы будет происходить визуально.
Сейчас давайте рассмотрим выбор элемента или элементов. Факт выбора - появление контекстного меню, например, цель - выравнивание выбранного (слева, справа, по центру), или распределение элементов по вертикали или горизонтали с одинаковым шагом, или изменение их размеров (по минимальному, по максимальному).
Автоматический перерасчет координат и размеров предпочтительнее ручного. Меньше ошибок - быстрее достигается цель. Кроме того, можно сделать станицу в одном браузере, сохранить положение и размеры элементов. Открыв эту страницу на смартфоне, можно поправить значения координат и размеров и запомнить их для конкретной модели смартфона или версии браузера.
Так одна и та же страница без ручного соблюдения требования кроссбраузерности будет иметь различные данные для отображения на различных устройствах и в различных браузерах.
Если позволить посетителю выполнять эти процедуры самостоятельно, а также выбирать нужные элементы страницы из числа предусмотренных разработчиком, можно обеспечить кроссбраузерность и требуемую функциональность страницы с учетом мнения пользователя.
182
В этом примере мы выбираем элемент div и делаем его перемещаемым путем вызова для него метода draggable() . Как показано на рисунке ниже, в открывшемся документе элемент занимает свою обычную позицию, но после этого его можно переместить с помощью указателя мыши в любое место в окне браузера:
Возможность перетаскивания элементов полезна уже сама по себе, но она приносит еще больше пользы, если применяется в сочетании с взаимодействием Droppable, которое описано далее.
Взаимодействие Draggable реализуется исключительно за счет использования специфической HTML-разметки и CSS-стилей. Это означает, что данная функциональность будет работать практически в любом браузере, но наделенные ею элементы не смогут работать с аналогичными собственными средствами Drag-and-drop операционных систем.
Определяемые спецификацией HTML5 операции Drag-and-drop обычно реализуются с использованием собственных механизмов операционных систем. Если вы используете механизм Drag-and-drop jQuery UI, то во избежание возникновения конфликтных ситуаций эквивалентные средства HTML5 лучше отключить. С этой целью установите для атрибута draggable элемента body документа значение false.
Настройка взаимодействия DraggableСуществует множество опций настройки для взаимодействия Draggable. Наиболее важные свойства, рассмотрению которых посвящены следующие разделы, приведены в таблице ниже:
| axis | Ограничивает возможности перемещения определенными направлениями. Значение по умолчанию - false, оно означает отсутствие ограничений, но можно также указать значение "x" (перемещение только вдоль оси X) или "y" (перемещение только вдоль оси Y) |
| containment | Ограничивает местоположение перемещаемого элемента определенной областью экрана. Типы поддерживаемых значений описаны в таблице ниже, при рассмотрении соответствующего примера. Значение по умолчанию - false, оно означает отсутствие ограничений |
| delay | Определяет время, в течение которого должно осуществляться перетаскивание элемента, прежде чем он переместится. Значение по умолчанию - 0, оно означает отсутствие задержки |
| distance | Определяет расстояние, на которое пользователь должен перетащить элемент из его начальной позиции, прежде чем он действительно переместится. Значение по умолчанию - 1 пиксель |
| grid | Осуществляет принудительную привязку перемещаемого элемента к ячейкам сетки. Значение по умолчанию - false, оно означает отсутствие привязки |
Существуют несколько способов, с помощью которых можно ограничить перемещение элемента определенными направлениями. Первый из них заключается в использовании опции axis, позволяющей ограничить направление перемещения осью X или Y. Соответствующий пример приведен ниже:
... div.dragElement {font-size: large; border: thin solid black; padding:16px; width: 8em; text-align: center; background-color: lightgray; margin: 4px } $(function() { $(".dragElement").draggable({ axis: "x" }).filter("#dragV").draggable("option", "axis", "y"); }); Перетащить по вертикали Перетащить по горизонтали Запустить пример
В этом примере мы определяем два элемента div, выбираем их с помощью jQuery и вызываем метод draggable(). В качестве аргумента этому методу передается объект, который первоначально ограничивает перемещение обоих элементов div направлением вдоль оси X. Применив затем метод jQuery filter(), мы получаем возможность выбрать элемент dragV без повторного поиска средствами jQuery по всему документу и установить для него другое разрешенное направление перемещения - вдоль оси Y. Таким образом, мы получаем документ, в котором один элемент div можно перетаскивать только в вертикальном направлении, а другой - только в горизонтальном. Результат представлен на рисунке:
Можно также ограничить область экрана, в которой допускается перетаскивание элемента. Для этого используется опция containment. Форматы значений, которые можно указывать в этой опции, описаны в таблице ниже:
Пример использования опции containment приведен ниже:
... div.dragElement {font-size: large; border: thin solid black; padding:16px; width: 8em; text-align: center; background-color: lightgray; margin: 4px } #container { border: medium double black; width: 700px; height: 450px} $(function() { $(".dragElement").draggable({ containment: "parent" }).filter("#dragH").draggable("option", "axis", "x"); }); Перетащить по горизонтали Перетащить внутри родителя Запустить пример
В этом примере возможности перемещения обоих элементов ограничены таким образом, что их можно перетаскивать только внутри родительского элемента, в качестве которого выступает элемент div с фиксированными размерами. Для одного из перемещаемых элементов div с помощью опции axis введено дополнительное ограничение, заключающееся в том, что он может перемещаться внутри родительского элемента только в горизонтальном направлении. Результат проиллюстрирован на рисунке:
Опция grid позволяет задать привязку перемещаемого элемента к ячейкам сетки. Эта опция принимает в качестве значения массив из двух элементов, определяющих ширину и высоту ячеек сетки в пикселях. Пример использования опции grid приведен ниже:
... #draggable {font-size: x-large; border: thin solid black; width: 5em; text-align: center; padding:10px} $(function() { $("#draggable").draggable({ grid: }); }); Перетащи меня Запустить пример
В этом примере задана сетка с ячейками шириной 100 пикселей и высотой 50 пикселей. Когда вы перетаскиваете элемент, он "перескакивается" из одной (невидимой) ячейки в другую. Эффект привязки является весьма показательным примером использования функциональности взаимодействий, однако его трудно передать с помощью экранных снимков.
Можно создать эффект привязки лишь для одного направления, указав для оси свободного перемещения значение 1. Например, если присвоить опции grid значение , то элемент будет привязываться к ячейкам сетки шириной 100 пикселей при перемещении по горизонтали, но перемещение по вертикали будет свободным.
Задержка перемещенияСуществуют две опции, позволяющие организовать задержку при перетаскивании перемещаемого элемента. С помощью опции delay можно задать время в миллисекундах, в течение которого пользователь должен перетаскивать указатель мыши, прежде чем элемент будет действительно перемещен. Другой вид задержки обеспечивается опцией distance, определяющей расстояние в пикселях, на которое пользователь должен перетащить указатель мыши, прежде чем за ним последует элемент.
Пример использования обеих настроек приведен ниже:
... #time, #distance {font-size: large; border: thin solid black; padding: 10px; width: 120px; text-align: center; background-color: lightgray; margin: 4px; } $(function() { $("#time").draggable({ delay: 1000 }) $("#distance").draggable({ distance: 150 }) }); Блок с задержкой времени Блок с минимальным расстоянием Запустить пример
В этом примере есть два перемещаемых элемента, для одного из которых задержка задана с помощью опции delay, а для другого - с помощью опции distance.
В случае задержки, определяемой опцией delay, пользователь должен выполнять перетаскивание в течение заданного времени, прежде чем это приведет к действительному перемещению элемента. В данном примере длительность этого промежутка составляет 1000 мс. Перемещать мышь в это время вовсе не обязательно, но на протяжении всего периода задержки кнопка мыши должна оставаться в нажатом состоянии, после чего элемент можно будет переместить, сдвинув мышь. По истечении времени задержки перемещаемый элемент привяжется к местоположению указателя мыши с учетом ограничений, налагаемых опциями grid, region и axis, о которых ранее говорилось.
Опция distance оказывает похожее воздействие, но в этом случае пользователь должен перетащить указатель мыши не менее чем на заданное количество пикселей в любом направлении от начального местоположения элемента. После этого перемещаемый элемент скачкообразно переместится к текущему местоположению указателя.
Если применить обе настройки к одному и тому же элементу, то перемещаемый элемент не сдвинется с места до тех пор, пока не будут выполнены оба критерия задержки, т.е. пока попытка перетаскивания элемента не будет длиться в течение заданного времени и пока указатель мыши не переместится на заданное количество пикселей.
Использование методов взаимодействия DraggableВсе методы, определенные для взаимодействия Draggable, входят в набор базовых методов, с которыми вы уже познакомились при рассмотрении виджетов. Методы, специфические для взаимодействия Draggable, не предусмотрены, поэтому мы не будем рассматривать их подробно. Перечень доступных методов приведен в таблице ниже:
Использование событий взаимодействия DraggableВзаимодействие Draggable поддерживает простой набор событий, уведомляющих о перетаскивании элемента. Эти события описаны в таблице ниже:
Как и в случае событий виджетов, на эти события также можно реагировать. Пример обработки событий start и stop приведен ниже:
... #draggable {font-size: x-large; border: thin solid black; width: 190px; text-align: center; padding:10px} $(function() { $("#draggable").draggable({ start: function() { $("#draggable").text("Перетаскивание...") }, stop: function() { $("#draggable").text("Перетащи меня") } }); }); Перетащи меня Запустить пример
В этом примере события start и stop используются для изменения текстового содержимого элемента в процессе перетаскивания. Эта благоприятная возможность является следствием того, что взаимодействие Draggable реализовано исключительно с использованием средств HTML и CSS: можно использовать jQuery для изменения состояния перемещаемого элемента даже в то время, когда он движется по экрану.
Использование взаимодействия DroppableВ некоторых ситуациях одной лишь возможности перетаскивания элемента может быть вполне достаточно, но наибольшую пользу оно приносит в тех случаях, когда используется совместно с взаимодействием Droppable.
Элементы, к которым было применено взаимодействие Droppable (принимающие элементы), приобретают способность принимать перемещаемые элементы, созданные с помощью взаимодействия Draggable.
Принимающие элементы создаются с помощью метода droppable() , но для получения полезной функциональности потребуется создать обработчики событий из числа тех, которые определены для этого вида взаимодействия. Доступные события приведены в таблице ниже:
| create | Происходит в момент применения взаимодействия Droppable к элементу |
| activate | Происходит, когда пользователь начинает перетаскивать перемещаемый элемент |
| deactivate | Происходит, когда пользователь прекращает перетаскивать перемещаемый элемент |
| over | Происходит, когда пользователь перетаскивает перемещаемый элемент над принимающим элементом (но при условии, что кнопка мыши еще не была отпущена) |
| out | Происходит, когда пользователь перетаскивает перемещаемый элемент за пределы принимающего элемента |
| drop | Происходит, когда пользователь оставляет перемещаемый элемент на принимающем элементе |
Пример создания простого принимающего элемента, для которого определен единственный обработчик события drop, приведен ниже:
... #draggable, #droppable {font-size: large; border: thin solid black; padding: 10px; width: 100px; text-align: center; background-color: lightgray; margin: 4px;} #droppable {padding: 20px; position: absolute; right: 5px;} $(function() { $("#draggable").draggable(); $("#droppable").droppable({ drop: function() { $("#draggable").text("Оставлено") } }); }); Оставь здесь Перетащи меня Запустить пример
В этом примере в документ добавлен элемент div, текстовое содержимое которого представлено строкой "Оставь здесь". Мы выбираем этот элемент, используя jQuery, и вызываем метод droppable(), передавая ему объект с настройками, который определяет обработчик для события drop. Ответом на это событие является изменение текста перемещаемого элемента с помощью метода text().
Создаваемое в данном примере интерактивное взаимодействие категории Drag-and-drop является простейшим, но оно создает удобный контекст для объяснения возможностей совместной работы взаимодействий Draggable и Droppable. Различные стадии процесса перетаскивания элементов проиллюстрированы на рисунке:
Все это выглядит очень просто. Мы перетаскиваем перемещаемый элемент до тех пор, пока он не окажется над принимающим элементом, и отпускаем его. Перемещаемый элемент остается там, где он был оставлен, и его текстовое содержимое изменяется в ответ на наступление события drop. В следующих разделах показано, как использовать другие события взаимодействия Droppable для повышения комфортности работы пользователя.
Подсветка целевого принимающего объектаИспользуя события activate и deactivate, можно подсветить целевой принимающий объект, когда пользователь начинает процесс перетаскивания элемента. Во многих ситуациях эта идея оказывается весьма плодотворной, поскольку при этом пользователь получает надежное указание относительно того, какие элементы являются частью модели Drag-and-drop. Соответствующий пример приведен ниже:
... $(function() { $("#draggable").draggable(); $("#droppable").droppable({ drop: function() { $("#draggable").text("Оставлено") }, activate: function() { $("#droppable").css({ border: "medium double green", backgroundColor: "lightGreen" }); }, deactivate: function() { $("#droppable").css("border", "").css("background-color", ""); } }); }); ... Запустить пример
Как только пользователь начинает перетаскивать элемент, срабатывает событие activate - связанное с нашим принимающим элементом, и функция-обработчик использует метод css() для изменения CSS-свойств border и background-color этого элемента. В результате целевой принимающий элемент подсвечивается, указывая пользователю на существование связи между ним и перемещаемым элементом.
Событие deactivate используется для удаления значений CSS-свойств из принимающего элемента и его возврата в исходное состояние, как только пользователь отпускает кнопку мыши. (Это событие происходит всякий раз, когда перетаскивание элемента прекращается, независимо от того, оставлен перемещаемый элемент на принимающем элементе или не оставлен.) Этот процесс проиллюстрирован на рисунке:
Технологию Drag-and-drop можно усовершенствовать, добавив в нее обработку событий over и out. Событие over происходит, когда 50% перемещаемого элемента оказывается над любой частью принимающего элемента. Событие out наступает тогда, когда перекрывавшиеся ранее элементы перестают перекрываться. Пример ответной реакции на эти события приведен ниже:
$(function() { $("#draggable").draggable(); $("#droppable").droppable({ drop: function() { $("#draggable").text("Оставлено") }, activate: function() { $("#droppable").css({ border: "medium double green", backgroundColor: "lightGreen" }); }, deactivate: function() { $("#droppable").css("border", "").css("background-color", ""); }, over: function() { $("#droppable").css({ border: "medium double red", backgroundColor: "red" }); }, out: function() { $("#droppable").css("border", "").css("background-color", ""); } }); }); Запустить пример
Здесь использованы те же функции-обработчики, что и в предыдущем примере, но в данном случае они связаны с событиями over и out. Когда с принимающим элементом перекрывается по крайней мере 50% перемещаемого элемента, он заключается в рамку и цвет его фона изменяется, как показано на рисунке:
Указанный 50%-ный предел называется порогом перекрывания (tolerance) , величину которого можно задавать при создании принимающего элемента, как будет показано далее.
Настройка взаимодействия DroppableДля взаимодействия Droppable предусмотрен ряд свойств, путем изменения которых можно настроить его поведение. Эти свойства перечислены в таблице ниже:
| disabled | Если эта опция равна true, то функциональность взаимодействия Droppable первоначально отключена. Значение по умолчанию - false |
| accept | Сужает множество перемещаемых элементов, на которые будет реагировать принимающий элемент. Значение по умолчанию - *, ему соответствует любой элемент |
| activeClass | Определяет класс, который будет присваиваться в ответ на событие activate и удаляться в ответ на событие deactivate |
| hoverClass | Определяет класс, который будет присваиваться в ответ на событие over и удаляться в ответ на событие out |
| tolerance | Определяет минимальную степень перекрывания, при которой происходит событие over |
Можно ограничить множество перемещаемых элементов, которые будут приниматься элементом, наделенным функциональностью взаимодействия Droppable, с помощью опции accept. В качестве значения опции accept следует присвоить селектор. В результате этого события взаимодействия Droppable будут происходить лишь в том случае, если перемещаемый элемент соответствует указанному селектору. Соответствующий пример приведен ниже:
... .draggable, #droppable {font-size: large; border: thin solid black; padding: 10px; width: 100px; text-align: center; background-color: lightgray; margin: 4px;} #droppable {padding: 20px; position: absolute; right: 5px;} $(function() { $(".draggable").draggable(); $("#droppable").droppable({ drop: function(event, ui) { ui.draggable.text("Оставлено") }, activate: function() { $("#droppable").css({ border: "medium double green", backgroundColor: "lightGreen" }); }, deactivate: function() { $("#droppable").css("border", "").css("background-color", ""); }, accept: "#drag1" }); }); Оставь здесь Элемент 1 Элемент 2 Запустить пример
В этом примере есть два перемещаемых элемента с идентификаторами drag1 и drag2. При создании принимающего элемента используется опция accept, с помощью которой мы указываем, что приемлемым перемещаемым элементом будет только элемент drag1.
При перетаскивании элемента drag1 вы будете наблюдать тот же эффект, что и в предыдущих примерах. В соответствующие моменты для принимающего элемента будут запускаться события activate, deactivate, over и out. В то же время, если перетаскивать элемент drag2, который не соответствует указанному в параметре accept селектору, то эти события запускаться не будут. Этот элемент можно свободно перемещать, но он не будет восприниматься принимающим элементом.
Обратите внимание на изменение способа выбора приемлемого перемещаемого элемента, для которого следует вызывать метод text(). Когда в документе был всего лишь один перемещаемый элемент, для этого хватало атрибута id:
Drop: function() { $("#draggable").text("Оставлено") },
В данном примере имеется два перемещаемых элемента, и выбор по атрибуту id не даст желаемого результата, поскольку текст в этом случае будет всегда изменяться в одном и том же перемещаемом элементе, независимо от того, какой из них является приемлемым для принимающего элемента.
Выход состоит в том, чтобы использовать объект ui, который jQuery UI предоставляет в качестве дополнительного аргумента каждому обработчику событий. Свойство draggable объекта ui возвращает объект jQuery, содержащий элемент, который пользователь перетаскивает или пытается оставить на целевом элементе, что позволяет выбрать требуемый элемент следующим образом:
Drop: function(event, ui) { ui.draggable.text("Оставлено") },
Изменение порога перекрыванияПо умолчанию событие over происходит лишь в тех случаях, когда по крайней мере 50% перемещаемого элемента перекрывается с принимающим элементом. Величину этого порогового перекрывания можно изменить с помощью опции tolerance, которая может принимать значения, указанные в таблице ниже:
Чаще всего я использую два значения, fit и touch, поскольку их смысл наиболее понятен для пользователей. Значение fit используется мною в тех случаях, когда перетаскиваемый элемент должен остаться в той области принимающего элемента, в которую он был перемещен, а значение touch - когда перемещенный элемент должен вернуться в исходную позицию (соответствующий пример будет приведен далее). Пример использования параметров fit и touch приведен ниже:
Значение clone указывает jQuery UI на то, что необходимо создать копию перемещаемого элемента вместе со всем его содержимым и использовать полученный результат в качестве вспомогательного элемента. Результат представлен на рисунке:
Вспомогательный элемент удаляется, когда пользователь отпускает кнопку мыши над перемещаемым элементом, оставляя перемещаемый и принимающий элементы в их исходных позициях.
Как показано на рисунке, исходный перемещаемый элемент остается на своем месте и лишь вспомогательный элемент перемещается по экрану вслед за указателем мыши. Если размеры перемещаемого элемента велики, как в нашем примере, то он закрывает собой остальные элементы документа, так что даже отследить позицию принимающего элемента пользователю будет трудно. С этой проблемой можно справиться, предоставив функцию в качестве значения опции helper, как показано в примере ниже:
... $(function() { $("div.draggable")..png"/>") } }); $("#basket").droppable({ activeClass: "active", hoverClass: "hover" }); }); ... Запустить пример
Когда пользователь начинает перетаскивать элемент, jQuery UI вызывает функцию, заданную параметром helper, и использует возвращаемый элемент в качестве перемещаемого объекта. В данном случае я использую jQuery для создания элемента img. Результат представлен на рисунке:
Небольшое изображение играет роль заместителя перемещаемого элемента, что значительно упрощает отслеживание других элементов документа.
Объект ui, который jQuery UI передает событиям взаимодействия Droppable, содержит свойство helper, и это свойство можно использовать для манипуляций вспомогательным элементом в процессе его перетаскивания. Пример использования этого свойства в связке с событиями over и out приведен ниже:
... $(function() { $("div.draggable")..png"/>") } }); $("#basket").droppable({ activeClass: "active", hoverClass: "hover", over: function(event, ui) { ui.helper.css("border", "thick solid #27e6ed") }, out: function(event, ui) { ui.helper.css("border", "") } }); }); ...
Здесь события over и out, а также свойство ui.helper используются для отображения рамки вокруг вспомогательного элемента, когда он перекрывает принимающий элемент. Результат представлен на рисунке:
С помощью опции snap можно добиться того, чтобы перемещаемый элемент как бы "притягивался" к краям элементов, рядом с которыми он проходит. В качестве значения эта опция принимает селектор. Перемещаемый элемент будет привязываться к краям любого элемента, соответствующего указанному селектору. Пример использования опции snap приведен ниже:
Запустить пример jQuery UI #snapper, .draggable, .droppable {font-size: large; border: medium solid black; padding: 4px; width: 150px; text-align: center; background-color: lightgray; margin-bottom: 10px;} .droppable {margin-right: 5px; height: 50px; width: 120px} #dropContainer {position: absolute; right: 5px;} div span {position: relative; top: 25%} .droppable.active {border: medium solid green} .droppable.hover {background-color: lightgreen} #snapper {position: absolute; left: 35%; border: medium solid black; width: 180px; height: 50px} $(function() { $("div.draggable").draggable({ snap: "#snapper, .droppable", snapMode: "both", snapTolerance: 50 }); $("#basket").droppable({ activeClass: "active", hoverClass: "hover" }); }); Корзина Привяжись здесь Перетащи меня
Когда перемещаемый элемент приближается к одному из подходящих элементов, он как бы "притягивается" к нему таким образом, что их соседние края соприкасаются. Для такой привязки можно выбрать любой элемент, а не только принимающий. В этом примере я добавил элемент div и определил для опции snap значение, которое выбирает в документе данный элемент, а также принимающий элемент.
Существует пара вспомогательных опций, позволяющих более точно настроить поведение элементов в отношении привязки. Одна из них - это опция snapMode . С ее помощью можно указать тип привязки. Допускаются следующие значения: inner (привязка к внутренним краям элементов), outer (привязка к внешним краям элементов) и both (привязка ко всем краям; используется по умолчанию).
Опция snapTolerance позволяет указать, на какое расстояние должен приблизиться перемещаемый элемент к краю элемента-мишени, прежде чем произойдет привязка. Значение по умолчанию - 20, что означает 20 пикселей. В примере используется значение 50, которому соответствует привязка на большем расстоянии. Очень важно правильно выбрать значение этой опции. Если значение опции snapTolerance слишком мало, то пользователь может не заметить эффекта привязки, а если оно слишком велико, то перемещаемый элемент начнет совершать неожиданные скачки, привязываясь к далеко расположенным элементам.
Уже в течение долгого времени существуют JavaScript функции, которые позволяют нам создавать drag & drop интерфейсы. Но ни одна из этих реализаций, не является родной для браузера.У HTML5 есть собственный метод создания drag & drop интерфейсов (с небольшой помощью JavaScript). В этой статье, мы расскажем вам, как этого можно достичь …
Поддержка браузеров
В настоящее время HTML5 drag & drop поддерживается всеми основными браузерами для десктопов (в том числе IE (даже в IE 5.5 имеется частичная поддержка)), но не поддерживается ни одним из популярных мобильных браузеров.
Drag&Drop события
На каждом этапе перетаскивания (drag & drop) запускаются различные события для того, чтобы браузер знал, какой JavaScript код нужно выполнять. Список событий:
- dragStart: запускается, когда пользователь начинает перетаскивать элементы;
- dragEnter: запускается, когда перетаскиваемый элемент впервые перетаскивается над целевым элементом;
- dragOver: срабатывает при перемещении мыши над элементом, когда происходит перетаскивание;
- dragLeave: запускается, если курсор пользователя оставляет элемент при перетаскивании;
- drag: приходит в действие каждый раз, когда мы двигаем мышью во время перетаскивания нашего элемента;
- drop: запускается, когда выполняется фактический drop;
- dragEnd: срабатывает, когда пользователь отпускает кнопку мыши при перетаскивании объекта.
С учетом всех этих слушателей событий, у вас есть хороший контроль над тем, как будет работать интерфейс.
Объект dataTransfer
Именно здесь и происходит все drag&drop волшебство. Этот объект содержит данные, которые были отправлены drag операцией. Данные могут быть установлены и получены различными способами, наиболее важными из которых являются:
- dataTransfer.effectAllowed=value: возвращает разрешенные типы действий, возможные значения: none, copy, copyLink, copyMove, link, linkMove, move, all и uninitialized.
- dataTransfer.setData(format, data): добавляет определенные данные и формат.
- dataTransfer.clearData(format): очищает все данные для определенного формата.
- dataTransfer.setDragImage(element, x, y): задает изображение, которое вы хотите перетащить, х и у значения указывают, где должен быть курсор мыши(0, 0 расположит его вверху слева).
- data = dataTransfer.getData(format) : как следует из названия, он возвращает данные для определенного формата.
Создание drag&drop примера
Теперь мы начнем создавать простой drag&drop пример . Как вы видите, у нас есть два маленьких divs и один большой, мы можем перетащить маленькие дивы внутрь большого, и даже переместить их обратно.
Перетаскивание объекта
Первое, что нам нужно сделать, это создать HTML. Мы делаем div перетаскиваемыми с помощью draggable атрибута:
Когда это будет сделано, мы должны определить JavaScript функцию, которая будет cрабатывать, как только мы будем начинать передвигать этот элемент:
Function dragStart(ev) { ev.dataTransfer.effectAllowed="move"; ev.dataTransfer.setData("Text", ev.target.getAttribute("id")); ev.dataTransfer.setDragImage(ev.target,100,100); return true; }
В этом коде, мы сначала объявляем, какой тип эффекта позволяем в операции и устанавливаем его на move. Во второй строке, мы устанавливаем данные для работы, где текст будет Text и значением будет ID элемента, который мы перетаскиваем. После этого, мы используем метод setDragImage, который установит, что мы будем перетаскивать, а затем, где будет курсор во время перетаскивания, а так как, кубики 200 на 200 пикселей, мы поместили его в самый центр. В конце, мы возвращаем return true.
Drop объекта
Для того, чтобы элемент принял drop, он должен прослушать 3 различных события: dragEnter, dragOver, а также drop события. Так что давайте добавим это к нашему HTML5 в div с ID большого (big):
Function dragEnter(ev) { ev.preventDefault(); return true; } function dragOver(ev) { ev.preventDefault(); }
В первой функции мы определяем, что должно произойти, когда элемент, который мы перетаскиваем достигнет требуемого элемента, где должен произойти drop, в данном случае мы только предотвращаем поведение браузера по умолчанию. Следующее, в dragOver функции мы просто не допускаем, чтобы произошел drop по умолчанию.
В следующей части, мы определяем функцию, для того, когда элемент будет “брошен” на желаемой цели:
Function dragDrop(ev) { var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.stopPropagation(); return false; }
В этой последней части, мы сначала установили переменную data, где мы получаем все данные, которые доступны для текстового формата, а затем мы добавляем data к div, где нужно “бросить” элемент.
Сделать секцию drop целью
В демо показано, что два div могут быть перемещены обратно на свои места. К счастью, добавление еще одной drop цели, намного проще, чем вы думаете. Потому что эти функции у нас уже есть и все, что нам нужно сделать, это добавить слушатели событий:
И это все, что нужно для того, чтобы позволить перетаскивание div на прежнее место.
Существует много drag&drop приложений, которые построены с использованием JavaScript библиотек, и зачастую использовать их проще. Но мы надеемся, что в этой HTML5 и JavaScript технике, вы увидете будущий потенциал для решения ваших задач.
Где элементы GUI реализованы при помощи псевдографики) при помощи манипулятора «мышь » или сенсорного экрана .
Способ реализуется путём «захвата» (нажатием и удержанием главной (первой , чаще левой) кнопки мыши) отображаемого на экране компьютера объекта, программно доступного для подобной операции, и перемещении его в другое место (для изменения расположения) либо «бросания» его на другой элемент (для вызова соответствующего, предусмотренного программой, действия). По отношению к окнам (также способным к перемещению подобным способом) данный термин обычно не употребляется.
Базовыми действиями и самыми простыми примерами drag-and-drop действий являются: перемещение объекта, перемещение объекта в из панели в панель, хотя в современных операционных системах drag-and-drop получил широкое применение и является одним из главных способов взаимодействия с компьютером в графическом интерфейсе пользователя.
Объектами для перемещения могут быть следующие элементы интерфейса : значки (иконки) Рабочего стола , плавающие панели инструментов , ярлыки программ в Панели задач (начиная с Win XP), элементы TreeView , текстовая строка, ячейка DataGridView., также элементы OLE . Перемещаться объекты могут как в пределах некоторой определённой области, в пределах одного окна , между панелями одного окна, так и между разными окнами.
Событие перетаскивания должно инициироваться каким-либо действием пользователя. Чаще всего этим действием является нажатие левой кнопки мыши на элементе (событие это называется MouseDown), который может быть перемещен в своем контейнере. Некоторые компоненты обладают собственными событиями начала drag-n-drop - например, TreeView имеет событие ItemDrag.
Wikimedia Foundation . 2010 .
Смотреть что такое "Drag-and-drop" в других словарях:Drag and drop - 〈[ dræg ənd drɔ̣p] n.; ; unz.; EDV〉 das Anklicken eines Objektes, das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird [<engl. drag „ziehen“ + and „und“ + drop „fallen… … Universal-Lexikon
Форма выполнения каких либо действий в графических интерфейсах пользователя, подразумевающая использование компьютерной мыши. В переводе с английского означает буквально: тащи и бросай. Действие выполняется путем оперирования видимыми на экране… … Словарь бизнес-терминов
drag and drop - (computing) To move an icon, file, etc across the screen using a mouse and release it in a different place (dragˈ and dropˈ adjective) Main Entry: drag … Useful english dictionary
drag and drop - IT to move something from one area of a computer screen to another using the mouse: »The software allows you to drag and drop elements for the page images, text, etc. anywhere you want. Main Entry: drag … Financial and business terms
drag-and-drop - UK US verb n.; Gen.: ; Pl.: unz.; EDV〉 das Anklicken eines Objektes, das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird }
