Теперь пропишем стили для эффекта переноса объектов.
Класс .gu-mirror вешается на элемент который находится в движение. Для этого создаётся дополнительный элемент в конце body и прикрепляется к координатам курсора.
Класс .gu-unselectable ставится на элемент body в момент переноса элемента. С его помощью вы можете затемнить область переноса.
Класс .gu-transit вешается на область в которую, предположительно, должен переместиться элемент который мы захватили.
Класс .gu-hide это вспомогательный класс для применения display: none к элементу.
/* Dragula CSS Release 3.2.0 from: https://github.com/bevacqua/dragula */ .gu-mirror < position: fixed !important; margin: 0 !important; z-index: 9999 !important; opacity: 0.8; -ms-filter: «progid:DXImageTransform.Microsoft.Alpha(Opacity=80)»; filter: alpha(opacity=80); >.gu-hide < display: none !important; >.gu-unselectable < -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; >.gu-transit
Простая установка Drag and Drop эффекта на сайт
В качестве первого параметра функция dragula принимает массив с элементами областей контейнеров. Все элементы помещенные в эти контейнера автоматически становятся элементами которые можно перемещать.
Hot potatoes
dragula([ document.querySelector(«.dragWrapper_1»), document.querySelector(«.dragWrapper_2»), document.querySelector(«.dragWrapper_3»), ]);
Настройка параметров для Drag and Drop эффекта
Вторым параметром для функции dragula можно передать объект с параметрами работы эффекта Drag and Drop.
dragula(containers, < moves: function (el, source, handle, sibling) < return true; // по умолчанию элементы всегда можно перетаскивать >, accepts: function (el, target, source, sibling) < return true; // по умолчанию элементы могут быть помещены в любой из `контейнеров` >, invalid: function (el, handle) < return false; // не запрещайте инициировать какие-либо перетаскивания по умолчанию >, direction: ‘vertical’, // Ось Y учитывается при определении того, где будет отброшен элемент copy: false, // элементы перемещаются по умолчанию, а не копируются copySortSource: false, // элементы в контейнерах с копией исходного кода могут быть переупорядочены revertOnSpill: false, // выход за область вернет элемент туда, откуда он был перетащен, если это верно removeOnSpill: false, // выход за область приведет к `удалению` элемента, если это верно mirrorContainer: document.body, // установите элемент, к которому добавляются зеркальные элементы ignoreInputTextSelection: true, // позволяет пользователям выбирать вводимый текст, подробности см. Ниже slideFactorX: 0, // позволяет пользователям выбирать величину перемещения по оси X, прежде чем оно будет считаться перетаскиванием вместо щелчка slideFactorY: 0, // позволяет пользователям выбирать величину перемещения по оси Y, прежде чем оно будет считаться перетаскиванием, а не щелчком >);
Добавление обработчиков событий для эффекта Drag and Drop
Вы можете повесить обработчики событий для начала перетаскивания элемента, помещения блока в контейнер, выхода элемента из контейнера и прохода элемента над контейнером.
How to use Hot potatoes: jcloze, jcross,jmatch, jquiz, jmix.
dragula([ document.querySelector(«.dragWrapper_1»), document.querySelector(«.dragWrapper_2»), document.querySelector(«.dragWrapper_3»), ]) .on(‘drag’, function (el) < // console.log(«Перетаскиваем блок») >).on(‘drop’, function (el) < // console.log(«Блок помещён в контейнер») >).on(‘over’, function (el, container) < // console.log(«Блок над контейнером») >).on(‘out’, function (el, container) < // console.log(«Блок вышел из контейнера») >);
На этом всё!
Больше интересных статей в нашей группе — https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи — https://vk.com/prog_time
Так же прокачивайте свои навыки на нашем канале — https://www.youtube.com/c/ProgTime
Наши планы
- Написание материала для курса по разработке ботов на Telegram
- Разработка универсального парсера на PHP
Поддержите мой сайт!
Каждый переведённый донат, мотивирует на создание новых записей и уроков на YouTube
Источник: prog-time.ru
FireMonkey. От простого к сложному #12. Использование DragDrop в FMX 2.0., посмотреть с чем мы можем работать при разработке проектов как под Windows, так и под Mac OS. В общем провести небольшое такое исследование на тему.
Конечно, то, что FireMonkey — это платформа для разработки приложений под различные операционные системы, даст о себе знать и придется вникать в тонкости работы. В общем
Разбираться я начал с самых, что ни есть простых моментов по работе с DragDrop. Таскать я решил все тот же Memo (хотя для первого примера можно таскать вообще что угодно) поэтому, чтобы сильно не углубляться во всякие методы Drag X, Y: Integer); begin Memo1.Lines.Add(Sender.ClassName+’ DragDrop’) end;
То есть — проще некуда. Теперь смотрим на очередность срабатывание событий.
VCL-приложение:
TMemo StartDrag —>зажал левую кнопку мыши
TMemo DragOver
TMemo DragOver
TMemo DragOver —> потянул мышь на TPanel
TMemo DragOver
[. ] TPanel DragOver —>тянем Memo над панелькой
TPanel DragOver
TPanel DragOver
[. ] TPanel DragDrop —> отпустил кнопку мыши
TMemo EndDrag
При этом стоит отдельно отметить — когда я зажимаю левую кнопку мыши, то срабатывает именно StartDrag и сразу же 2 раза DragOver и пока я не начну движение мышкой события срабатывать не будут. Почему обращаю на это внимание? Смотрим, что происходит в приложении FireMonkey:
TMemo DragEnter —>зажал левую кнопку мыши
TMemo DragOver
TMemo DragOver
[. ] TMemo DragOver —> потянул мышь на TDropTarget
TMemo DragOver
TMemo DragOver
[. ] TMemo DragOver
TMemo DragLeave —> курсор мыши ушел из Memo
TDropTarget DragEnter —> курсор попал в область TDropTarget
TDropTarget DragOver —> держим мышь в одном положении, не отпуская кнопку
TDropTarget DragOver
[. ] TDropTarget DragOver
TDropTarget DragOver
TDropTarget DragOver
TDropTarget DragLeave —> отпустили кнопку мыши
Первое, на что обратил внимание — это на срабатывание событие DragOver. Молотит даже, когда мышь стоит неподвижно. Что, на мой взгляд, не совсем хорошо, т.к. мало ли, что будет записано в обработчике и его постоянные срабатывания без повода могу повлиять на работу приложения. По-хорошему бы добавить в FMX такой замечательный тип как TDragState (как это сделано в VCL), но, чего не нашел в FireMonkey, того не нашел.
Второй момент — вместо ожидаемого события DragDrop, которое должно сигнализировать нам, что источник упал на приемник, почему-то сработало событие DragLeave, которое недвусмысленно сообщило, что источник упал не там где надо. И при этом так и не сработал DragEnd. Разберемся почему произошло не то, на что мы рассчитывали.
После небольшой проверки параметров в событии OnDragOver оказалось следующее: в VCL параметр Accept по умолчанию равен True, т.е. как только над панелькой в VCL-проекте зависла мышка с чем-то «в лапах», то TPanel автоматом стала приемником, а раз так, то DragDrop срабатывает.
В FireMonkey же все наоборот — по умолчанию Accept равен False и OnDragDrop не сработает до тех пор пока мы явно не изменим значение параметра на True.
С одной стороны такое положение дел с Accept несколько сбивает с толку, но, думаю, что такая организация работы для FireMonkey скорее плюс, чем минус и к этому просто надо привыкнуть.
Второй момент относительно параметра Accept при работе с TDropTarget можно озвучить следующим образом:
TDropTarget будет автоматически становиться приемником в случае, если у него заполнено свойство Filter и над компонентом «висит» хотя бы один файл, удовлетворяющий текущему фильтру.
Проверить это довольно просто. Убираем все явные присваивания Accept:=True из кода, добавляем в свойство Filter компонента строку ‘*.txt’, запускаем программу и пробуем бросить на TDropTarget текстовый файл — несмотря на то, что в обработчике события Accept так и будет оставаться в значении False, событие DragDrop сработает.
Вот чего не смог найти, так это того как заставить срабатывать событие OnDragEnd, но зато нашел у DropTarget’a два идентичных по содержанию события, которые работают:
property OnDropped: TDragDropEvent read FOnDrop write FOnDrop; property OnDragDrop: TDragDropEvent;
OnDropped срабатывает именно в том месте, где по логике VCL должен бы сработать EndDrag, так что, в принципе, может нам и не нужно OnDropEnd…
Что ещё следует учитывать при работе с Drag EndDrag();
Которые позволяли нам при работе с VCL запускать механизм DDrop запускается автоматически, если dmManual — то не работает вообще.
Теперь разберемся, что у нас есть в распоряжении при работе с механизмом Drag Files: array of string; Data: TValue; end;
Здесь Data содержит информацию, полученную из Source или Files (в зависимости от того, что перетаскивается)
Source — если содержит не nil, то переносится какой-либо объект
Files — содержит список файлов, которые переносятся на источник.
Посмотрим, что будет содержать TDragObject при перетаскивании на наш компонент TDragTarget разных элементов. Напишем такой обработчик для OnDropped:
procedure TForm9.DropTarget1Dropped(Sender: TObject; const Data: TDragObject; const Point: TPointF); var I: Integer; begin if Assigned(Data.Source) then Memo1.Lines.Add(‘Data.Source =’+Data.Source.ClassName); for I := Low(Data.Files) to High(Data.Files) do Memo1.Lines.Add(‘File: ‘+Data.Files[i]); Memo1.Lines.Add(‘Data.Data.Kind: ‘+GetEnumName(TypeInfo(TTypeKind),ord(Data.Data.Kind))); end;
В обработчике OnDragOver разрешим перетаскивать, что угодно:
procedure TForm9.DropTarget1DragOver(Sender: TObject; const Data: TDragObject; const Point: TPointF; var Accept: Boolean); begin Memo1.Lines.Add(Sender.ClassName+’ DragOver ‘+BoolToStr(Accept,True)); Accept:=True end;
Теперь запустим приложение и попробуем перетащить и бросить на TDropTarget какой-нибудь компонент. В Memo мы получим следующую запись:
Data.Source =TMemo
Data.Data.Kind: tkUnknown
Получив в поле Source перетаскиваемый объект мы уже можем выполнять какие-то действия над ним (скопировать текст из Memo и вставить его в другой компонент, очистить и т.д.).
Соответственно, если мы перетащим на компонент группу файлов, то получим, например, такую запись:
File: С:Temp.txt File: С:Temp2.txt File: С:Temp.dat Data.Data.Kind: tkUString
Теперь немного изменим задачу — разрешим перетаскивать на TDropTarget только текстовые файлы. Изменяем свойства у TDropTarget следующим образом:
Filter:=’*.txt’ FilterIndex:=1
Источник: webdelphi.ru
Метод Drag-and-drop: определение, технология и функции
Теперь вы знаете, что такое drag-and-drop — это технология, которая помогает облегчить взаимопонимание между пользователем и компьютером или программированием. В последнее время «перетаскивание» блоков стало очень популярным в веб-разработке. Большинство пользователей слышали про такие сервисы , как «Wix» или «Tilda». Они позволяют создавать сайты без знания программирования.
О чем говорить, если даже в такой популярной профессиональной CMS, как WordPress, при помощи плагинов также организован а drag-and-drop-технология постройки сайтов. А более мелких реализаций «драг энд дроп» пруд пруди.