Как сделать перетаскивание элемента html
Добавил пользователь Валентин П. Обновлено: 04.10.2024
Перетаскивание файлов из рабочего стола в браузер одна из наиболее интересных возможностей HTML5. Я опишу как:
Поддержка браузеров
Прежде чем начать, нужно отметить что поддержка перетаскивания файлов браузерами будет неравномерной. Код работает в современных браузерах, но вполне возможно API будет меняться.
HTML и CSS
Далее идет код стандартной формы с инпутом типа файл. Единственное HTML5 нововведение в форме это атрибут "multiple" который позволяет пользователю выбирать любое количество файлов.
Со стороны сервера загрузка файлов будет проводиться средствани PHP, но независимо от того какую технологию вы используете на сервере JavaScript код останется тем же. Скрытое поле MAX_FILE_SIZE определяет 300,000 байт, размер будем проверять и на стороне клиента и на стороне сервера, чтобы предотвротить загрузку огромного размера файлов.
Для элемента также определенн класс .hover который меняет стили когдо пользователь перетаксивает файлы на элемент. Браузеры не поддерживают стили :hover в этой ситуации, но мы можем добовлять класс спомощю Javascript когда происходит нужное событие.
File API
W3C File API предостовляет несколько объектов которые мы будем использовать:
- FileList: предостовляет массив выбранных файлов.
- File: предстовляет единственный файл.
- FileReader: интерфейс который позволяет нам считать информацию о файле со стороны клиента и использовать в JavaScript.
JavaScript события
Далее проверим поддержку File API и вызовем функцию инициализации Init():
Также вы можете скрыть инпут типа файл, если перетаскивание поддерживается. Но я не буду этого делать чтобы пользователь мог воспользоваться удобным ему вариантом.
Изменение стилей при переносе
Мало кто испытал перетаскивание файлов в браузер. На самом деле, многие опытные интернет пользователи считают это невозможным. Поэтому написали внутри элемента "перетащите сюда файлы". А следующая функция будет добвлять класс к элементу, когда файл уже будет находится непосредственно над элементом, тем самым будут меняться стили.
Анализирование перетащенных или выбранных файлов
- Вызываем функцию FileDragHover() чтобы убрать стиля при hover и предотвратить выполнение событий браузера. Это очень важно, так как браузер может попытаться отобразить файл
- Проходимся по объекту FileList.
- Наконец функция проходит по всем объектам типа File в объекте FileList и передает их как аргумент в функцию ParseFile()
Функция выводит информация используя три основные свойства представленные объектом File только для чтения.
В этом примере мы создадим сортируемый список, элементы которого можно перетаскивать в него:
Каждый элемент имеет класс draggable , указывающий, что пользователь может перетащить его:
Сделать элементы перетаскиваемыми
Используя аналогичный подход, упомянутый в публикации Сделать перетаскиваемый элемент, мы можем превратить каждый элемент в перетаскиваемый элемент:
Обработчик события mouseup будет удалить стили позиционных перетаскиваний элемента и очищают обработчик событий:
Теперь мы можем прикрепить событие mousedown к каждому элементу, просматривая список элементов:
Добавить заполнитель
Давайте еще раз посмотрим на список предметов:
Заполнитель создается один раз при перемещении мыши, поэтому мы добавляем новый флаг isDraggingStarted для его отслеживания:
Заполнитель будет удален, как только пользователи уронят элемент:
Вот порядок элементов, когда пользователь перетаскивает элемент:
Определите, перемещает ли пользователь элемент вверх или вниз
Прежде всего, нам нужна вспомогательная функция, чтобы проверить, находится ли элемент выше или ниже другого.
nodeA обрабатывается, как указано выше, nodeB если горизонтальная центральная точка nodeA меньше, чем nodeB . Центральную точку узла можно рассчитать, взяв сумму его вершины и половины его высоты:
Когда пользователь перемещает элемент, мы определяем предыдущий и следующий элементы родственного элемента:
Если пользователь переместит элемент в начало, мы поменяем местами заполнитель и предыдущий элемент:
Точно так же мы поменяем следующий и перетаскивающий элемент, если обнаружим, что пользователь перемещает элемент вниз:
Здравствуйте! Я уже писал про drag’n’drop с помощью JavaScript. В этой же статье я хочу рассказать о Drag and Drop средствами HTML 5. Технология drag and drop (иногда может упоминаться как drag’n’drop) позволяет сделать элементы на веб-страницах перетаскиваемыми (совсем как окна с программами в операционной системе).
Ранее это было возможным только с помощью реализаций сложных JavaScript функций или подключением jQuery. Сейчас технология drag and drop является частью спецификации HTML5 и ее поддержка встроена во все браузеры.
Практически все элементы на веб-страницах можно сделать перетаскиваемыми включая картинки, ссылки и обычные текстовые элементы. Для того, чтобы сделать элемент перетаскиваемым необходимо добавить к нему HTML5 атрибут draggable со значением true.
Мало просто сделать элемент перетаскиваемым, чтобы извлечь из этого какую-либо пользу мы должны дополнительно обработать перетаскиваемый элемент с помощью специальных событий перетаскивания, которые были добавлены в HTML5:
| Событие | Описание |
|---|---|
| dragstart | Выполнится в начале операции перетаскивания |
| ondrag | Выполнится во время перетаскивания элемента |
| ondragenter | Выполнится когда перетаскиваемый элемент будет наведен на элемент, который может его принять |
| ondragleave | Выполнится когда перетаскиваемый элемент будет выведен за пределы границ элемента, который может его принять |
| ondragover | Выполнится когда перетаскиваемый элемент будет перемещаться в пределах границ элемента, который может его принять |
| ondrop | Выполнится когда перетаскиваемый элемент будет перемещен в принимающий его элемент |
| ondropend | Выполнится в конце операции перетаскивания |
Всю обработку перетаскивания элемента можно условно разбить на 2 шага:
1. Сохранение данных перетаскиваемого элемента в начале операции перетаскивания.
2. Извлечение ранее сохраненных данных, после того, как перетаскиваемый элемент будет перемещен в принимающий его элемент.
По умолчанию элементы не могут принимать другие элементы, поэтому если мы хотим создать принимающий элемент мы должны привязать к нему обработчик события ondragover и передать ему event.preventDefault().
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Для перетаскивания данных в HTML-приложение и из него (или в HTML-файл, отображаемый в HTMLLoader, и из него), могут использоваться события drag HTML. API-интерфейс перетаскивания в HTML позволяет осуществлять перетаскивание в элементы модели DOM и обратно в HTML-содержимом.
Примечание. Также могут использоваться API-интерфейсы классов AIR NativeDragEvent и NativeDragManager. Для этого нужно прослушивать события на объекте HTMLLoader, в котором содержится HTML-файл. Тем не менее API-интерфейс HTML больше подходит для работы с HTML-моделью DOM и позволяет контролировать поведение по умолчанию.
Поведение по умолчанию при перетаскивании
В среде HTML задано поведение по умолчанию для жестов перетаскивания текста, изображений и URL-адресов. С помощью поведения по умолчанию всегда можно перетащить эти типы данных из одного элемента в другой. Однако текст можно перетаскивать только между редактируемыми областями страницы. При перетаскивании текста из одной редактируемой области в другую по умолчанию выполняется перемещение. При перетаскивании текста в редактируемую область страницы из нередактируемой или из другого приложения по умолчанию выполняется копирование.
Поведение по умолчанию можно переопределить. Для этого необходимо самостоятельно обрабатывать события перетаскивания. Для отмены поведения по умолчанию необходимо вызвать методы preventDefault() объектов, отправленных в ответ на события перетаскивания. При необходимости для выполнения нужного действия можно вставить данные в целевой элемент перетаскивания и удалить их из источника перетаскивания.
События перетаскивания в HTML
Ниже перечислены события, отправляемые элементом-инициатором, начинающим перетаскивание:
Отправляется, когда пользователь начинает перетаскивание. Обработчик этого события при необходимости может предотвратить перетаскивание, вызвав метод preventDefault() объекта события. Для управления возможностью копирования, создания ссылки или перемещения перетаскиваемого объекта необходимо задать свойство effectAllowed. Выделенный текст, изображения и ссылки по умолчанию помещаются в буфер обмена, но для жеста перетаскивания можно задать разные данные с помощью свойства dataTransfer объекта события.
Непрерывно отправляется при выполнении перетаскивания.
Отправляется, когда пользователь отпускает кнопку мыши для завершения перетаскивания.
Целевой элемент перетаскивания отправляет следующие события:
Отправляется непрерывно, пока перетаскивание осуществляется в границах элемента. Обработчик этого события должен задавать свойство dataTransfer.dropEffect для указания действия, которое необходимо выполнить по окончании перетаскивания: копирование, создание ссылки или перемещение.
Отправляется, когда указатель мыши, перетаскивающий данные, входит в границы элемента.
Если изменить какие-либо из свойств объекта dataTransfer в обработчике события dragenter, эти изменения будут отменены следующим же событием dragover. С другой стороны, между событиями dragenter и первым событием dragover, которое может заставить курсор мигать, если заданы разные свойства, существует небольшая задержка. Часто для обоих событий может использоваться один и тот же обработчик.
Отправляется, когда указатель мыши, перетаскивающий данные, покидает границы элемента.
Отправляется, когда пользователь отпускает данные над элементом. Доступ к перетаскиваемым данным возможен только в рамках обработчика этого события.
Объект события, отправляемый в ответ на эти события, похож на событие mouse. Свойства события mouse, такие как ( clientX , clientY ) и ( screenX , screenY ), могут использоваться для определения положения мыши.
Самое важное свойство объекта события drag — это dataTransfer : в нем содержатся перетаскиваемые данные. Сам объект dataTransfer включает ряд свойств и методов:
Свойство или метод
Эффект, поддерживаемый целевым элементом перетаскивания. Как правило, это значение задается обработчиком события dragstart. См. раздел Эффекты перетаскивания в HTML.
Эффект, выбранный пользователем или целевым элементом. Если задать свойство dropEffect в обработчике событий dragover или dragenter , то AIR обновляет вид курсора мыши, указывая, что произойдет после отпускания кнопки мыши. Если свойство dropEffect не соответствует ни одному из поддерживаемых эффектов, то завершить перетаскивание данных невозможно и курсор мыши приобретает вид unavailable. Если в ответ на последнее событие dragover или dragenter не задано свойство dropEffect , то пользователь может выбрать один из поддерживаемых эффектов с помощью стандартных системных клавиш-модификаторов.
Конечный эффект записывается в свойстве dropEffect объекта, отправляемого в ответ на dragend . Если пользователь отменяет перетаскивание, отпустив кнопку мыши вне границ целевого элемента, свойство dropEffect принимает значение none .
Массив, содержащий строковые значения типов MIME для каждого формата данных в объекте dataTransfer .
Получает данные в формате, заданном параметром mimeType .
Метод getData() может быть вызван только в ответ на событие drop .
Добавляет данные в dataTransfer в формате, заданном параметром mimeType. Могут быть добавлены данные в разных форматах. Для этого для каждого типа MIME вызывается метод setData() . Любые данные, помещенные в объект dataTransfer в результате поведения перетаскивания по умолчанию, стираются.
Метод setData() может быть вызван только в ответ на событие dragstart .
Стирает все данные в формате, заданном параметром mimeType .
setDragImage(image, offsetX, offsetY)
Задает заказное изображение для перетаскивания. Метод setDragImage() может быть вызван только в ответ на событие dragstart, и только когда весь элемент HTML перетаскивается путем задания значения element для его стиля CSS -webkit-user-drag . Параметр image может быть элементом сценария JavaScript или объектом Image.
Типы MIME при перетаскивании в HTML
С объектом dataTransfer события перетаскивания в HTML может использоваться ряд типов MIME:
Читайте также: