Главная Yota Как выполняется операция drag and drop. Техника Drag-n-Drop с использованием jQuery. Ограничение допустимых перемещаемых элементов

Как выполняется операция drag and drop. Техника Drag-n-Drop с использованием jQuery. Ограничение допустимых перемещаемых элементов

Функция «Drag and Drop» может помочь увеличить производительность вашего iPad. Вот как можно ее использовать.

Таким образом, вы можете переместить файл из одной облачной службы хранения в другую, скопировать текст из Safari в приложение для редактирования текста, чтобы добавить цитату или создать резервную копию определенных фотографий в приложении для хранения файлов.

Как перетаскивать фотографии, файлы и текст

1. Коснитесь и удерживайте фотографию, файл или выделенный текст, который требуется перетащить в другое приложение.

2. Перетащите элемент в нужное место в данном приложении или другое, которое вы открыли в режиме «Slide Over» или «Split View», и отпустите.

Как перетащить несколько фотографий или файлов одновременно

1. Коснитесь и удерживайте одну из фотографий или файлов, которые требуется перетащить.

2. При перетаскивании текущего элемента коснитесь другой фотографии или файла, который также требуется перетащить. Сделайте это снова с таким количеством элементов, которое хотите переместить.

3. Перетащите все выбранные объекты в назначенное место в другое приложение, которое вы открыли в режиме «Slide Over» или «Split View» и отпустите их.

Как перетащить текст из одного приложения в другое

1. Коснитесь и удерживайте часть текста, которую нужно перетащить, чтобы выделить ее.

2. Используйте точки выделения, чтобы выделить остальную часть текста, которую вы хотите перетащить.

3. Нажмите и удерживайте выделенный текст.

4. Перетащите текст в приложение, в котором вы хотите разместить его и отпустите.

Как изменить расположение иконок сразу нескольких приложений с помощью «Drag and Drop»

В то время как большинство функций перетаскивания в iOS работают только на iPad, данный трюк фактически работает как на iPhone, так и на iPad. Это позволяет упорядочивать расположение приложений на главном экране с помощью « Drag and Drop», а не перемещать их по одному.

1. Нажмите и удерживайте значок приложения, положение которого на главном экране необходимо изменить.

2. Коснитесь дополнительных приложений, которые также требуется переместить.

3. Перетащите эти приложения на страницу или в папку, в которой они должны находиться, и отпустите их.

Недавно у меня появилась идея заняться разработкойигры для андроид . Для начала я решил написать шахматы. Мне казалось технологияDrag and Drop отлично подойдет для реализации механизма перемещения фигур. Для непосвященных отмечу, чтометод drag and drop заключается в возможности перетаскивания одних графических объектов на другие и выполнения того или иного действия после отпускания. Простейший пример - удаление ярлыка с рабочего стола вашего ПК перетаскиванием его в корзину. "Кинув" ярлык в корзину, мы говорим системе, что хотим заставить взаимодействовать эти два объекта. Система получает наш сигнал и решает, какое действие ей стоит предпринять. Drag and drop получила широкое распространение благодаря своей интуитивной ясности. Этот подход подкреплен нашим опытом взаимодействия с объектами реального мира и прекрасно работает в виртуальной среде. Что же касается шахмат, с помощью drag and drop технологически проще определить клетку, куда пользователь перетащил фигуру, поскольку не нужно вычислять номер клетки по координатам точки отпускания. Эту работу возьмет на себя виртуальная машина.

Цели использования технологии Drag n Drop

Использование технологии drag and drop позволяет мне малой кровью решить три задачи:

Визуализация хода. Когда пользователь касается фигуры и начинает ее перемещение по экрану, фигура заменяется более мелким рисунком. Таким образом, пользователь понимает что фигура захвачена.

Я ограничил область перемещения фигуры размерами доски.

Если пользователь отпустил фигуру в неправильном месте, она должна вернуться в первоначальное положение.

Задачи обозначены, приступим к их реализации.

Подмена ImageView при касании

Все мои фигуры представляют собой объекты ImageView. К сожалению, оказалось что реализация Drag & Drop в Android не позволяет "прямо из коробки" осуществлять подмену изображения объекта при его касании. Тем не менее, эта задача вполне решаема средствами API. Нам понадобится выполнить ряд несложных действий:

Создать объект DragShadowBuilder.

Вызвать метод startDrag.

Спрятать наш ImageView, который отображает фигуру, вызвав метод setVisibility с параметром View.INVISIBLE. В результате на экране останется только объект DragShadowBuilder, что будет сигналом пользователю о захвате фигуры.

Эти действия необходимо реализовать в обработчике OnTouchListner объекта ImageView. Для этого переопределим метод onTouch:

@ Override public boolean onTouch(View view, MotionEvent motionEvent) { if (motionEvent. getAction() == MotionEvent. ACTION_DOWN) { ClipData clipData= ClipData. newPlainText("" , "" ) ; View. DragShadowBuilder dsb= new View. DragShadowBuilder(view) ; view. startDrag(clipData, dsb, view, 0 ) ; view. setVisibility(View. INVISIBLE) ; return true ; } else { return false ; } }

Все очень просто. Итак, с подменой изображения разобрались, перейдем к следующей задаче.

Ограничение области перетаскивания для функции drag drop

Ограничение области перетаскивания связано с одной проблемой. Дело в том, что если отпустить фигуру за пределами доски, события drop не случится, поскольку пользователь отпустил объект на пустом месте, и объекту не с чем взаимодействовать. В результате фигура не вернется в свое первоначальное состояние и так и останется навсегда спрятанной. Я убил уйму времени на чтение документации, но так и не нашел способа ограничить область перетаскивания объектов. Озарение пришло внезапно. Мне совсем не нужно ограничивать область, мне нужно узнать правильно ли пользователь отпустил фигуру или нет.

Определение правильности отпускания
Ответы на свои вопросы я нашел в разделе "handling drag end events" на сайте Android Developers. Вот несколько ключевых моментов:

Когда пользователь завершает перетаскивание в обработчике DragListeners генерируется событие ACTION_DRAG_ENDED.

В DragListener можно получить более подробную информацию об операции drag, вызвав метод DragEvent.getResult().

Если DragListener возвращает true в ответ на событие ACTION_DROP, вызов getResult также вернет true, в противном случае - false.

Таким образом, мне нужно перехватить событие ACTION_DRAG_ENDED и вызывать метод getResult. Если он вернет false, значит пользователь утащил фигуру за пределы доски, и мне нужно перевести ImageView в видимый режим.

@ Override public boolean onDrag(View view, DragEvent dragEvent) { int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) { containsDragable= false ; } else if (dragAction== DragEvent. ACTION_DRAG_ENTERED) { containsDragable= true ; } else if (dragAction== DragEvent. ACTION_DRAG_ENDED) { if (dropEventNotHandled(dragEvent) ) { dragView. setVisibility(View. VISIBLE) ; } } else if (dragAction== DragEvent. ACTION_DROP& amp;& amp; containsDragable) { checkForValidMove((ChessBoardSquareLayoutView) view, dragView) ; dragView. setVisibility(View. VISIBLE) ; } return true ; } private boolean dropEventNotHandled(DragEvent dragEvent) { return ! dragEvent. getResult() ; }

Теперь пользователь может где угодно отпускать фигуру, и ничего страшного не произойдет.

Определение допустимых ходов

Последняя часть статьи посвящена проверке допустимости хода, который пытается сделать пользователь. Прежде чем подробно приступить к обсуждению этой темы, сделаю небольшую ремарку, объясняющую структуру моего приложения. Шахматная доска представлена как TableLayout, а каждая клетка является потомком LinearLayout и имеет OnDragListener.

Кроме того, каждый OnDragListener ссылается на объект "посредника" (mediator), который заботится о взаимодействии игровых объектов и запоминает положение текущей клетки.

Когда пользователь тащит фигуру над клеткой, возможны следующие действия:

Использование события ACTION_DRAG_ENTERED для установки переменной ‘containsDraggable’ в true.

Использование события ACTION_DRAG_EXITED для установки переменной ‘containsDraggable’ в false.

Использование события ACTION_DROP для запроса посредника о допустимости установки фигуры в эту клетку.

Ниже приведен код, реализующий описанную логику

Как видите, не зависимо от того допустим ли ход или нет, ImageView переводится в видимое состояние. Я хотел, чтобы пользователь видел, как перемещается фигура. Ранее я упоминал, что клетка является потомком LayoutView. Это сделано для того чтобы проще перемещать ImageView от клетки к клетке. Ниже приводится код метода checkForValidMove, который показывает, как происходит перемещение ImageView.

private void checkForValidMove(ChessBoardSquareLayoutView view, View dragView) { if (mediator. isValidMove(view) ) { ViewGroup owner= (ViewGroup) dragView. getParent() ; owner. removeView(dragView) ; view. addView(dragView) ; view. setGravity(Gravity. CENTER) ; view. showAsLanded() ; mediator. handleMove(view) ; } }

Надеюсь, эта статья поможет Вам при разработке собственных проектов.

Использование технологии перетаскивания (drag and drop ) дает возможность пользователю перемещать различные объекты из одного в другой, например, элементы одного списка в другой. Для этого необходимо использовать два элемента управления: приемник и источник. Приемником считается тот объект, который примет объект источник (перемещаемый объект).

События, возникающие в процессе перемещения объектов, перечислены ниже в том порядке в каком они возникают.

OnStartDrag (тип TStartDragEvent) - в начале выполнения операции генерируется объектом-источником. Параметры, которые передаются обработчику событий: объект приемник DragObject (тип TDragObject), объект-источник Source (тип TObject).

OnDragOver (тип TDragOverEvent) - создает объект-приемник, когда над ним оказывается перемещаемый объект. Параметры, которые передаются обработчику событий:объект-приемник Sender (тип TObject), объект-источник Source (тип TObject), состояние перемещения State (тип TDragState), X и Y (тип integer) - текущие координаты указателя мыши, Accept (тип boolean) признак подтверждения операции перемещения. Состояние перемещения дает понять находиться ли перемещаемый объект в области приемника, передвигается ли в ней, покинул ее. Переданные параметры дают возможность объекту-приемнику принять или отклонить объект-источник. Параметр Accept устанавливается в значение Trye если операция перемещения принята, в противном случае - False.

onDragDrop (тип TDragDropEvent) - создается объектом-приемником, когда перемещаемый объект опускается на нем. Обработчику события передаются текущие координаты указателя мыши, объект приемник Sender (тип TObject), исходный объект перемещения Source (тип TObject).

onEndDrag (тип EndDragEvent) - создается при завершении операции перетаскивания. Передаются обработчику события координаты X и Y точки, где оказался объект-источник Sender и объект приемник Target.

Для создания перетаскивания достаточно реализовать два события: OnDragDrop и OnDragOver при установленном свойстве DragMode равном dmAutomatic. В противном случае начало операции перемещения, метод BeginDrag, необходимо программисту закодировать.

Для закрепления материала создадим следующее приложение. На форму поместим компонент Panel. В свойстве DragMode Инспектора Объектов установим значение dmAutomatic. Выделим объект форма и с помощью Инспектора Объектов создадим нижеследующие события:

Procedure TForm1.FormDragOver(Sender, Source: TObject; X, Y: Integer; State: TDragState; var Accept: Boolean); begin if Source = Panel1 then Accept:= True else Accept:= False; end; procedure TForm1.FormDragDrop(Sender, Source: TObject; X, Y: Integer); begin Panel1.Left:= X; Panel1.Top:= Y; end;

Теперь запустив приложение и нажав над панелью кнопку мыши мы можем перемещать объект панель по всей форме.

Итог: мы познакомились с технологией перетаскивания (drag and drop) и использовали ее на практике.

Уже в течение долгого времени существуют 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 технике, вы увидете будущий потенциал для решения ваших задач.

Методы работы с техникой "перетащи и брось" складывались в течение многих лет. Неудивительно, что с увеличением числа программистов, разрабатывающих плагины с открытым исходным кодом (например, для jQuery) вновь возрождаются старые методы. Библиотека для JavaScript весьма адаптивна и предлагает множество улучшений в нашу эпоху веб технологий.

В данном уроке мы сделаем скрипт, который можно будет использовать для создания динамических прямоугольников с техникой "перетащи и брось" на своем веб сайте. Процесс управляется jQuery. Такие скрипты сохраняют время, предоставляя готовый функционал! А библиотеку "перетащи и брось" можно будет использовать в других проектах.

Подготавливаем контент

Первым делом подготовим небольшой сайт для проекта. В папке проекта нужно создать два каталога с примечательными именами"js" и "css" и пустой файл index.html . Код будет очень простой, чтобы сложилось четкое представление о работе, и появилась точка для дальнейшего развития.

Ниже приводится код нашего HTML файла. В разделе head мы включаем 3 скрипта. Основной скрипт jQuery будет подгружаться с сервера Google Code . также подключается наш файл стилей style.css , который содержит основные свойства для формирования внешнего вида нашего документа.

Перетащи меня Да-да. Именно меня. Меня тоже можно перетащить { zIndex: 200, opacity: .9 }

P.S.: меня можно бросить где угодно!

Внутри раздела body помещены только два блока div , которые содержат оба прямоугольника. Код достаточно простой и понятный. Внутри каждого прямоугольника размещены заголовки с классами handler и handler2 . Это важно, так как при перетаскивании каждый прямоугольник ведет себя по-своему.

Устанавливаем CSS

Код HTML очень прост. Если вам понятна основная разметка, то и стили CSS также не будут представлять сложности. В основном определяются поля, отступы и цвета.

Body,html { font-family:Calibri, sans-serif; background:#eaf3fb; font-size:12px; height:1000px; line-height:18px; } p { height:30px; }

Селекторы body,html используются только для демонстрационной страницы. А весь контент размещается в двух перетаскиваемых прямоугольниках.

Dv1 { width:200px; background-color:#eff7ff; border:1px solid #96c2f1; position:absolute; left:100px; top:100px; } .dv1 h2 { background-color:#b2d3f5; padding:5px; font-family:Georgia, "Times New Roman", Times, serif; font-size:1.0em; text-transform:uppercase; font-weight:bold; color:#3a424a; margin:1px; cursor:move; } .dv1 div { padding:5px; margin-bottom:10px; } .dv2 { background-color:#f6ebfb; border:1px solid #a36fde; width:550px; position:absolute; cursor:move; left:400px; top:230px; } .dv2 h2 { background-color:#eacfe9; letter-spacing:-0.09em; font-size:1.8em; font-weight: bold; padding:15px; margin:1px; color:#241f24; cursor:move; } .dv2 .content2 { padding:5px; margin-bottom:10px; }

Для обоих классов.dv1 и.dv2 мы используем абсолютное позиционирование. В этом нет необходимости и, вероятно, это не самый лучший способ для позиционирования перетаскиваемых прямоугольников. Однако для нашего примера такое позиционирование имеет смысл, так как при каждом обновлении страницы прямоугольники устанавливаются в определенные места.

Также шрифты и цвета различаются для прямоугольников, чтобы легче было увидеть разницу.

В остальном заголовки и содержание блоков почти идентично. Если вы будете копировать стили в свой проект, поменяйте имена перед запуском. В некоторых случаях логичнее будет использовать ID вместо классов, например при использовании техники "перетащи и брось" для одного определенного блока.

Разбираем JavaScript

Два файла JavaScript содержат весь необходимый для работы код. Опустим детали работы с jQuery, так как это выходит за рамки урока. Обратим внимание на файл jquery.dragndrop.js .

На строке 22 происходит определение функции Drags .

$.fn.Drags = function(opts) { var ps = $.extend({ zIndex: 20, opacity: .7, handler: null, onMove: function() { }, onDrop: function() { } }, opts);

Здесь устанавливается возвращаемая переменная и данные инициализации для Drags . Такой способ очень широко используется при работе с jQuery для передачи опций другим функциям. Внутри мы устанавливаем переменные для всех доступных опций для перетаскиваемых прямоугольников.

Следующая часть кода включает обработчики событий для переменной dragndrop . Оба события drag и drop вызывают функции с передачей параметров события в них. Данные события происходят, когда вы нажимаете кнопку мыши, чтобы перетащить объект, а затем отпускаете ее.

Var dragndrop = { drag: function(e) { var dragData = e.data.dragData; dragData.target.css({ left: dragData.left + e.pageX - dragData.offLeft, top: dragData.top + e.pageY - dragData.offTop }); dragData.handler.css({ cursor: "move" }); dragData.target.css ({ cursor: "move" }); dragData.onMove(e); }, drop: function(e) { var dragData = e.data.dragData; dragData.target.css(dragData.oldCss); //.css({ "opacity": "" }); dragData.handler.css("cursor", dragData.oldCss.cursor); dragData.onDrop(e); $().unbind("mousemove", dragndrop.drag) .unbind("mouseup", dragndrop.drop); } }

Наши функции манипулируют CSS позиционированием каждого объекта. Если изменить абсолютное позиционирование ваших объектов, то это не повлияет на работу кода, так как каждая функция JavaScript изменяет любой стиль, который определен для объекта.

В остальном коде происходит проверка обработчика и косметические изменения других стилей. Здесь можно добавить изменение прозрачности, шрифта и его цвета, или добавить новые параграфы.

Функции Drag/Drop

Во втором файле fn.js содержится совсем простой код. Мы дожидаемся полной загрузки документа, после чего вызываем наши функции. Определяются два экземпляра функции Drags , которая разбиралась ранее.

У нас есть два перемещаемых блока с классами.dv1 и.dv2 . Если нужно оставить один перемещаемый блок, то нужно просто удалить вторую часть кода. Добавление еще одного перемещаемого блока также осуществляется просто. Нужно только добавить новую функцию в данном файле.

Первым делом нужно установить опции при вызове функции. Обязательно надо установить имя обработчика. C его помощью мы сообщаем jQuery, какой обработчик использовать при нажатии кнопки мыши в определенной области документа. В качестве имени обработчика может быть класс или атрибут ID.

В нашей первой функции есть два обработчика событий onMove и onDrop . Оба вызывают новые функции, передаваемые в текущее событие как переменные. Здесь выполняется манипулирование кодом HTML в прямоугольнике для обновления при каждом движении. Это замечательный эффект для демонстрации того, как можно осуществлять управление процессом с помощью простых событий jQuery.

Во второй функции мы используем параметры z-Index и opacity . Можно добавить и другие свойства CSS? но для этого потребуется переработать код JavaScript, чтобы осуществлялась проверка установок. Например, можно передавать другой стиль шрифта или значения для высоты и ширины для перемещаемого прямоугольника - получится очень интересный трюк!

Заключение

В результате небольшой работы мы получили в свое распоряжение замечательный интерфейс с функцией "перетащи и брось". jQuery предоставляет огромные преимущества для разработчиков, которые жаждут использовать в своих проектах старые методы.

В результате мы получили не только функции обработчики событий, но и можем передавать новые переменные в перетаскиваемые блоки. Это открывает новые возможности для творчества. Демонстрация к уроку содержит лишь набросок того, что можно делать с помощь такого кода.

Так что изучайте документацию jQuery для использования библиотечных функций.