Можно ли методом drag drop перетащить в электронный курс папку с файлами

Обновлено: 05.07.2024

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

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

СОДЕРЖАНИЕ

Действия

Основная последовательность операций перетаскивания:

Наведите указатель на объект
Нажмите и удерживайте кнопку мыши или другого указывающего устройства , чтобы "захватить" объект.
«Перетащите» объект в желаемое место, переместив указатель на это.
"Отбросьте" объект, отпустив кнопку.

Перетаскивание требует больше физических усилий, чем перемещение того же указывающего устройства без удерживания кнопок. Из-за этого пользователь не может двигаться так быстро и точно при перетаскивании (см. Закон Фиттса ). Однако операции перетаскивания имеют то преимущество, что они вдумчиво объединяют два операнда (объект для перетаскивания и место перетаскивания) в одно действие. Длительное перетаскивание (как в графическом дизайне) может утомить мышь.

Проблема дизайна возникает, когда одна и та же кнопка выбирает и перетаскивает элементы. Неточное движение может вызвать попытку выбрать объект для регистрации как движение перетаскивания.

Другая проблема заключается в том, что цель падения может быть скрыта под другими объектами. Пользователь должен будет остановить перетаскивание, сделать видимыми и источник, и цель и начать заново. В классической Mac OS строка меню в верхней части экрана служила универсальной целью «отменить перетаскивание». Эта проблема была решена в Mac OS X с появлением Exposé .

В Mac OS

Перетаскивание, называемое в то время щелчком и перетаскиванием , использовалось в оригинальном Macintosh для управления файлами (например, для копирования их между дисками или папками). В System 7 добавлена возможность открывать документ в приложении, перетаскивая значок документа на значок приложения.

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

На протяжении большей части своей истории Mac OS использовала однокнопочную мышь с кнопкой, закрывающей большую часть верхней поверхности мыши. Это может снизить эргономические проблемы, связанные с удержанием кнопки нажатой во время перетаскивания.

В OS / 2

На рабочее месте оболочка из OS / 2 использует перетаскивание экстенсивно с кнопкой мыши , оставляя один для первичного отбора и мышей. Его использование, как и другие расширенные функции Common User Access, отличало собственные приложения OS / 2 от платформенно-независимых портов.

В HTML

В рабочий проект спецификации HTML5 включена поддержка перетаскивания. HTML5 поддерживает различные виды функций перетаскивания, включая:

Перетаскивайте тексты и HTML-коды
Перетаскивайте элементы HTML
Перетаскивайте файлы

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

Веб-приложение электронной почты Google Gmail поддерживает перетаскивание изображений и вложений в последних версиях браузера Google Chrome и Safari (5.x) от Apple . Google Images позволяет пользователям перетаскивать файлы изображений в браузер для выполнения обратного поиска изображений .

На сенсорном экране

Интерфейсы сенсорного экрана также включают перетаскивание, или, точнее, долгое нажатие, а затем перетаскивание, например, на домашних экранах iPhone или Android .

В iOS 11 реализована функция перетаскивания, которая позволяет пользователю касаться элементов (и касаться другими пальцами, чтобы перетащить больше) в приложении или между приложениями на iPad . На iPhone эта функция доступна только в том же приложении, в котором пользователь запустил перетаскивание.

В программировании для конечных пользователей

Перетаскивание считается важным подходом к построению программ во многих системах разработки конечных пользователей . В отличие от более традиционных языков программирования, основанных на тексте, многие языки программирования для конечных пользователей основаны на визуальных компонентах, таких как плитки или значки, которыми конечные пользователи манипулируют с помощью интерфейсов перетаскивания. AgentSheets , среда программирования для детей, представила современное понятие программирования блоков перетаскивания, предоставляя 4 основных возможности: 1) блоки, которые могут быть составлены конечным пользователем, 2) блоки доступны для редактирования конечным пользователем, 3) блоки могут быть вложены для представления древовидные структуры, 4) блоки расположены геометрически для определения синтаксиса. Перетаскивание также присутствует во многих программах редактирования шейдеров для графических инструментов, таких как Blender . Перетаскивание также возможно в некоторых движках видеоигр, включая Unreal Engine , GameMaker Studio , Construct 2 и, с расширением, Unity .

Примеры

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

Придя впервые к технологии DRAG and DROP столкнулся с очень тяжелым её описанием (Это мое субъективное мнение. Прошу с ним не соглашаться, а перечитать все что только можно и посмотреть на этот вопрос с многих сторон). И решил написать пару статей, нацеленных на начинающих разработчиков, кто хочет познать дзен.

Статья будет состоять из двух частей:

Метод создания DRAG and DROP эффектов.
Практическое применение полученных знаний для создание сортировки при помощи DRAG and DROP

Параграф №1 Метод создания DRAG and DROP эффекта

Перед началом глубокого разбора, посмотрим поверхностно. Представьте себя в роли грузчика, вам необходимо перемесить коробку с одного места на другое. Для грузчика это «Ну взял, ну перенес. Готово!», а для программиста “Подошел к коробке, наклонился, взял коробку, поднял коробку, прошел N шагов, наклонился, отпустил коробку.”. Я это к тому, что перед началом работы проиграйте все в голове, по шагам и вы станете гораздо ближе к истине.

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

При создании DRAG and DROP первым шагом необходимо объекту, который мы будем перемещать, присвоить значение draggable='true'.

,
На первом этапе я хочу показать сам процесс, а после мы его распространим на все объекты. Мы сейчас работаем в JS и как вам известно, в браузере существуют различные события, к которым мы можем привязать свои последовательности действий. Давайте разберем необходимые события для создания DRAG and DROP:

dragstart — происходит, когда пользователь начинает перетаскивать элемент.
drag — происходит, когда элемент перетаскивается.
dragend — происходит, когда пользователь закончил перетаскивание элемента.
dragenter — происходит, когда перетаскиваемый элемент попадает в целевой объект.
dragleave — происходит, когда перетаскиваемый элемент покидает целевой объект.
dragover — происходит, когда перетаскиваемый элемент находится над целью.
drop — происходит, когда перетаскиваемый элемент падает на целевой объект.

Теперь очень важная информация! События делятся на две группы. Для перемещаемого элемента (тот кого мы перетаскиваем): dragstart, Drag, Dragend. Для принимающего элемента (куда перетаскиваем): Dragenter, Dragleave, Dragover, Drop. И эти события не могут работать наоборот, но они могут работать друг без друга.

К примеру: Необходимо переместить объект и оставить его там, где мы отпустили кнопку мыши. Эта задача не требует принимающей части.

Бесспорно, пример сделан на коленке, но он замечательно иллюстрирует не обязательность принимающего объекта.

Параграф №2. Не работает DROP в DRAG and DROP

Когда вы попробуете все события, вы обнаружите что drop не работает. Это разработчики данного метода делают атата тем, кто решил «И это всё… Хух, ерунда».

Ну тут все просто, перед событием drop необходимо на этот же элемент повесить событие

В этом туториале мы рассмотрим, как реализовать эффект drag & drop на ванильном JavaScript. Дословный перевод с английского — «потяни и брось» — отражает суть эффекта, это хорошо знакомое любому пользователю перетаскивание элементов интерфейса. Drag & drop может понадобиться в разных ситуациях — например, в таких:

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

Мы разберём drag & drop на примере сортировки. Для этого создадим интерактивный список задач.

HTML Drag and Drop API

В стандарте HTML5 есть API, который позволяет реализовать эффект drag & drop. Он даёт возможность с помощью специальных событий контролировать захват элемента на странице мышью и его перемещение в новое положение. Рассмотрим этот API подробнее.

По умолчанию перемещаться могут только ссылки, изображения и выделенные фрагменты. Если начать перетаскивать их, появится фантомная копия, которая будет следовать за курсором. Чтобы добавить возможность перетаскивания другим элементам, нужно задать атрибуту draggable значение true .

Далее для реализации перемещения используется ряд событий, которые срабатывают на разных этапах. Полный список есть на MDN, а мы рассмотрим основные.

drag — срабатывает каждые несколько сотен миллисекунд, пока элемент перетаскивается.
dragstart — срабатывает в момент начала перетаскивания элемента.
dragend — срабатывает в момент, когда перетаскивание элемента завершено.
dragover — срабатывает каждые несколько сотен миллисекунд, пока перетаскиваемый элемент находится над зоной, в которую может быть сброшен.
drop — срабатывает в тот момент, когда элемент будет брошен, если он может быть перемещён в текущую зону.

При успешном перемещении элемент должен оказаться на новом месте. Но по умолчанию большинство областей на странице недоступны для сброса. Чтобы создать область, в которую элементы могут быть сброшены, необходимо слушать событие dragover или drop на нужном элементе и отменять действие по умолчанию с помощью метода preventDefault . Тогда стандартное поведение будет переопределено — перетаскивание и сброс в эту область станут возможными. Рассмотрим на примере чуть позже.

Это далеко не все возможности API. Также в нём есть несколько интерфейсов, которые помогают получать доступ к данным перетаскиваемого элемента и изменять их. Например, существует объект DataTransfer , который кроме всего прочего хранит информацию о локальных файлах, если они перетаскиваются. В этом туториале нам не понадобится использовать эти возможности, но без DataTransfer не обойтись, если нужно, например, загружать файлы с компьютера и считывать данные, чтобы затем производить с ними какие-либо манипуляции. Подробно об этом на MDN.

Приступим к созданию нашего списка задач и рассмотрим на примере, как работать с HTML Drag and Drop API.

Вёрстка и стилизация списка задач

Список будет состоять из нескольких задач и заголовка. Для начала создадим разметку. Здесь всё просто — если речь идёт о списке, значит нужен тег ul .

Теперь добавим элементам базовую стилизацию:

Здесь стоит обратить внимание на тип курсора, который мы указали — move . Все элементы списка смогут перемещаться, а с помощью курсора move мы подсказываем пользователю, что есть такая возможность.

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

Реализация drag & drop

Шаг 1. Разрешим перетаскивание элементов

Переходим к JavaScript. В первую очередь присвоим элементам упомянутый ранее атрибут draggable со значением true , чтобы разрешить задачам перемещаться. Это можно сделать прямо в разметке или с помощью JavaScript.

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

Шаг 2. Добавим реакцию на начало и конец перетаскивания

Будем отслеживать события dragstart и dragend на всём списке. В начале перетаскивания будем добавлять класс selected элементу списка, на котором было вызвано событие. После окончания перетаскивания будем удалять этот класс.

Шаг 3. Реализуем логику перетаскивания

Мы добрались до основной части — перетаскивания задач. Будем отслеживать местоположение перемещаемого элемента относительно других, подписавшись на событие dragover . Благодаря тому, что оно срабатывает очень часто, мы сможем на лету вставлять элемент в нужное место в зависимости от положения курсора. Для этого реализуем такую логику:

Делаем всю область списка доступной для сброса.
Находим выбранный элемент .selected и тот элемент, на котором сработало событие dragover .
Проверяем, что событие dragover сработало не на выбранном элементе, потому что иначе перемещать элемент нет смысла — он уже на нужном месте.
Также проверяем, что dragover сработало именно на одном из элементов списка. Это важно, потому что курсор может оказаться и на пустом пространстве между элементами, а оно нас не интересует.
Находим элемент, перед которым нужно осуществить вставку. Сделаем это, сравнив положение выбранного элемента и текущего, на который наведён курсор.
Вставляем выбранный элемент на новое место.

В целом получившийся на этом этапе код — рабочий. Уже сейчас элементы можно сортировать так, как мы и планировали. Но при этом у варианта есть недостаток — перемещаемый элемент меняет положение в тот момент, когда курсор попадает на другой элемент. Такое поведение недостаточно оптимально и стабильно. С точки зрения пользователя логичнее ориентироваться на центр элемента. То есть мы должны осуществлять вставку только после того, как курсор пересечёт центральную ось, а не сразу после наведения на элемент. Чтобы реализовать это поведение, напишем функцию для получения nextElement другим способом.

Шаг 4. Учтём положение курсора относительно центра

Функция должна принимать на вход вертикальную координату курсора и текущий элемент, на котором сработало событие dragover . Мы будем сравнивать текущее положение курсора с центральной осью элемента, над которым курсор находится в момент перетаскивания. Таким образом, если мы хотим поменять элементы местами, то вставка должна сработать в тот момент, когда курсор пересекает центральную ось. Значит нас интересуют вертикальные координаты курсора и центра элемента, над которым он находится.

Давайте создадим функцию getNextElement() . Мы уже знаем, что она должна возвращать тот элемент, перед которым нужно сделать вставку. В этом нам поможет координата курсора и текущий элемент, которые будут переданы в параметры.

Чтобы получить вертикальную координату текущего элемента, используем метод getBoundingClientRect() . Он вызывается на элементе и возвращает объект, в свойствах которого находится информация о размерах и координатах элемента относительно вьюпорта. Нам понадобится координата y , но также нужно будет учесть высоту элемента height , потому что у рассчитывается относительно верхнего левого угла элемента, а нам нужен центр.

Давайте закрепим на примере. Допустим, мы хотим поменять два элемента местами — начинаем перемещать нижний элемент, наводим курсор на элемент перед ним. Пока мы не приблизились к центру элемента, ничего происходить не должно, потому что пока порядок элементов в DOM изменять не нужно. Но как только курсор пересечёт центральную ось, перемещаемый элемент будет вставлен перед тем элементом, на который мы навели курсор.

Всё почти готово, но нам нужно ещё учесть ситуацию, когда во время перемещения курсор был наведён на какой-то элемент и при этом центральную ось так и не пересёк. Для нас это значит, что порядок не изменился, и ничего делать не надо. Но программа пока об этом не знает и в таких ситуациях осуществляет вставку в DOM на то же самое место при каждом срабатывании события dragover . Как мы помним, оно срабатывает очень часто и каждый раз влечёт за собой ненужные операции с DOM. Мы изменим это поведение, добавив проверку.

Теперь всё работает так, как нужно: мы отслеживаем положение курсора относительно центра, лишние операции в DOM исключили и, главное, элементы сортируются — задача выполнена! Полный код решения — в нашей интерактивной демонстрации.

Перетащите с помощью мыши изображение W3Schools из одного прямоугольника в другой прямоугольник.

Drag and Drop - Перетянуть и кинуть

Drag and Drop - дословный перевод с английского языка - 'Перетянуть и кинуть'

Перетягивание (Drag and drop) - очень распространённая функция. Это когда вы 'захватываете' мышкой объект и перетягиваете его в другое место.

В HTML5 перетягивание является частью стандарта: любой элемент может быть перетянутым. Для этого используется JavaScript.

Поддержка браузерами

Цифры в таблице определяют первую версию браузера, которая полностью поддерживает перетягивание (Drag and Drop).

API
Drag and Drop	4.0	9.0	3.5	6.0	12.0

HTML Drag and Drop Пример

Ниже приведён пример простого перетягивания:

Пример

function drag(ev) ev.dataTransfer.setData("text", ev.target.id);
>

function drop(ev) ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
>
</script>
</head>
<body>

Это может показаться сложным, но давайте рассмотрим все разные части перетягивания.

Создать элемент для перетягивания

Прежде всего: Чтобы сделать элемент перетягиваемым, установите атрибут draggable на true (истина):

Чтобы перетянуть - ondragstart и setData()

Потом укажите, что должно произойти, когда элемент перетягивается.

В приведённом выше примере атрибут ondragstart вызывает функцию drag(event), которая указывает, какие данные необходимо перетягивать.

Метод dataTransfer.setData() устанавливает тип данных и значения перетягиваемых данных:

function drag(ev) <
ev.dataTransfer.setData("text", ev.target.id);
>

В этом случае тип данных - 'text', а значение - id элемента перетягивания ('drag1').

Куда кинуть перетянувши - ondragover

Событие ondragover указывает, куда можно перетянуть и скинуть данные.

По умолчанию данные/элементы не могут быть скинуты в другие элементы. Чтобы позволить скидывание, мы должны предотвратить обработку элемента по умолчанию.

Это делается путём вызова метода event.preventDefault() для ondragover события:

Произвести скидывание - ondrop

Когда вытягиваются перетягиваемые данные, происходит событие скидывания.

В приведённом выше примере атрибут ondrop вызывает функцию drop(event):

function drop(ev) <
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
>

Вызвать функцию preventDefault(), чтобы запретить обработку данных по умолчанию браузером (по умолчанию открывается как ссылка при скидывании);
Получить перетянутые данные с помощью метода dataTransfer.getData(). Этот метод возвратит любые данные, которые были установлены в том же типе в методе setData();
Перетянутые данные - это id перетянутого элемента ('drag1');
Добавьте перетянутый элемент в элемент drop.

Больше примеров

Перетяните с помощью мышки изображение вперёд и назад

Как перетянуть (и скинуть) изображение вперёд и назад между двумя элементами <div> (с одного прямоугольника в другой):

ПАЛИТРА ЦВЕТОВ

Получите ваш
Сертификат сегодня!

Связь с админом

Топ Учебники

Топ Справочники

Топ Примеры

Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

Читайте также: