Подробное объяснение события перетаскивания: анализ и практика решений по сортировке перетаскивания мыши и изменению размера HTML5.
Подробное объяснение события перетаскивания: анализ и практика решений по сортировке перетаскивания мыши и изменению размера HTML5.

Перетащите и отсортируйте список,изменение размера。Обычно используется передjQuery-UIinteractjsболее чистый)。оно проходитmousedown、mousemove、mouseupЭти три события используются для достижения эффекта перетаскивания элементов страницы мышью.。vue-drag-resize vuedraggableВероятно, это тот случай, когда ждешь посылку.:https://codepen.io/lujun-zhou/pen/LYybXNx

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

Объяснение API перетаскивания

Перетащите (перетащите и капля) есть HTML5 часть стандарта。по сравнению с предыдущимjquery-UIОжидание реализации библиотеки,Более удобно (исключает расчет координат и т.п.).

Чтобы сделать элемент перетаскиваемым, он должен быть draggable Свойство настроено на true

Язык кода:javascript
копировать
<div id=test draggable=true>test</div>

Атрибут перетаскивания: устанавливает, можно ли перетаскивать элемент.

  • правда: можно перетащить
  • false: отключить перетаскивание
  • авто: соответствует определению браузера, возможно ли перетаскивание

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

  • Картинка и ссылка, для выбора удерживайте левую кнопку мыши,Просто перетащите
  • Текст можно перетаскивать только в том случае, если он выделен.。Если отображается текст настроекdraggableсвойстводляtrue,Вы также можете перетаскивать объекты напрямую, удерживая левую кнопку мыши.

Перетащите сведения о событии

Когда элемент перетаскивается, он может пройти через множество элементов, прежде чем наконец достигнет элемента, который вы хотите разместить. Здесь я временно называю перетаскиваемый элемент исходным объектом, переданный элемент — объектом процесса, а прибывший элемент — целевым объектом. Разные объекты генерируют разные события перетаскивания.

Событие исходного объекта:

dragstart:Исходный объект начинает перетаскиваться,Событие срабатывает при начале движения

drag:Во время процесса перетаскивания исходного объекта,Срабатывает при перемещении перетаскиваемого объекта

dragend:Перетаскивание исходного объекта заканчивается,Вызывается, когда заканчивается вся операция перетаскивания.

События объекта обработки:

dragenter:Исходный объект входит в область действия объекта процесса.,Срабатывает, когда перетаскиваемый объект входит в объект процесса

dragover:Исходный объект перемещается в пределах объекта процесса.,Срабатывает, когда перетаскиваемый объект перемещается внутри объекта процесса.

dragleave:Исходный объект выходит за пределы объекта процедуры.,Срабатывает, когда перетаскиваемый объект покидает целевой объект

Перетащите список событий

Каждый перетаскиваемый элемент,Во время перетаскивания,Он пройдет через три процесса,Перетащите, чтобы начать-->Во время перетаскивания--> Перетащите концы

  • Запустить событие на цели перетаскивания (элемент источник можно перетаскивать элемент):
    • ondragstart - Срабатывает, когда элемент начинает перетаскиваться—— Что тащить?
    • ondrag - Срабатывает неоднократно при перетаскивании элемента
    • ondragend - Срабатывает, когда операция перетаскивания завершена
  • Событие срабатывает при освобождении цели (объекта назначения):
    • ondragenter - Это событие срабатывает, когда перетаскиваемый мышью объект входит в свой контейнер.
    • ondragover - Срабатывает, когда перетаскиваемый элемент находится внутри элемента назначение.——Куда это положить
    • ondragleave - Срабатывает, когда перетаскиваемый элемент покидает целевой элемент, не будучи отброшен.
    • ondrop - Во время процесса перетаскивания это событие вызывается при отпускании кнопки мыши — для размещения

Целевой

название события

иллюстрировать

перетаскиваемый элемент

dragstart

Срабатывает, когда элемент начинает перетаскиваться

drag

Срабатывает неоднократно при перетаскивании элемента

dragend

Срабатывает, когда операция перетаскивания завершена

объект назначения

dragenter

Срабатывает, когда перетаскиваемый элемент попадает в пространство экрана, занимаемое элементом назначения.

dragover

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

dragleave

Срабатывает, когда перетаскиваемый элемент покидает целевой элемент, не будучи отброшен.

Все событие перетаскивания запускается в следующей последовательности::dragstart-> drag -> dragenter -> dragover -> dragleave -> drop ->dragend

Событие целевого объекта:

drop:источник对象拖放到目标对象中,Срабатывает, когда целевой объект полностью принимает перетаскиваемый объект.,Его можно понимать как срабатывание при отпускании целевого объекта.

По умолчанию событие dragenterи драговер отказывается принимать любой перетаскиваемый элемент. поэтому,Мы должны предотвратить такое поведение браузеров по умолчанию.。e.preventDefault();

Если поле приема капли хочет получать элементы, полученные элементы перетаскивания, перетаскивание и перетаскивание должны предотвратить поведение по умолчанию.

Язык кода:javascript
копировать
el.ondragover = function(e){
   e.preventDefault();
}
el.ondrop = function(e){
 e.preventDefault();
}

В проекте vue:

Язык кода:javascript
копировать
@dragstart.native="dragStart(index,$event)"
@dragenter.native.prevent="dragenter(index,$event)"
@dragleave.native.prevent
@dragover.native.prevent
@dragend.native="dragend(index,$event)"
@drop.native.prevent="drop(index,$event)"

Это вызовет падение

объект dataTransfer

Объект передачи данных dataTransfer предоставляется во всех событиях перетаскивания.,В основномИспользуется для передачи данных между исходными объектами и целевыми объектами.

Объект, отправляемый одновременно с событием, вызванным операцией перетаскивания, — это DragEvent.,Он получен из MouseEvent.,Имеет всю функциональность объектов Event и MouseEvent.,И добавил dataTransferProperty. Свойство используется для сохранения данных перетаскивания и интерактивной информации.,Возвращает объект DataTransfer.

Объект DataTransfer определяет множество свойств и методов. Давайте рассмотрим некоторые из стандартных.

свойство

иллюстрировать

types

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

files

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

dropEffect

Получает тип выбранной в данный момент операции перетаскивания или устанавливает для операции новый тип. Всегда должно быть установлено одно из возможных значений effectAllowed [none, move, copy, link]. Установите dropEffect для цели перетаскивания в обработчике событий перетаскивания.

effectAllowed

Указывает эффекты, разрешенные для операций перетаскивания. Должно быть, один из них【 none, copy, copyLink, copyMove, link, linkMove, move, all, неинициализированный】По умолчанию неинициализированный Указывает, что все эффекты разрешены. Установить effectAllowedсвойство в обработчике ondragstart

метод

иллюстрировать

void setData(format, data)

Устанавливает данные перетаскивания для операции перетаскивания в соответствии с указанными данными и типом. формат может быть типом MIME

String getData(format)

Возвращает данные в указанном формате. Формат соответствует setData().

void clearData([format])

Удаляет данные для данного типа операции перетаскивания. Если данные данного типа не существуют,Этот метод не выполняет никаких операций. Если параметры не указаны,Все типы данных удаляются.

void setDragImage(img, xOffset, yOffset)

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

метод передачи данных

setData(format, data)

Установите данные, которые будут переданы в событии перетаскивания. Параметром формата является тип данных и данные, которые будут храниться в данных. Например: event.dataTransfer.setData('text/plain', 'hello world')

Тип хранимых данных,делиться4добрый:

  • text/plain
  • text/html
  • text/xml
  • text/uri-list

Примечание. Если данные данного типа не существуют, они добавляются в конец перетаскиваемого хранилища данных, так что последний элемент в списке dataTransfer.types будет новым типом.

getData(format)

Метод читает данные из объекта dataTransfer.,Параметр — это тип данных, указанный в setDataметод.,Например: event.dataTransfer.getData('text/plain')

clearData()

Метод очистил объект Данные, хранящиеся в dataTransfer,Параметр необязательный,это тип данных. если пусто,Все данные будут удалены.

setDragImage(element,x,y)
  • Метод устанавливает значок перетаскивания через элемент img.
  • элемент представляет изображение под курсором мыши при перетаскивании (обычно элемент изображения или элемент холста)
  • x и y соответственно обозначают горизонтальное и вертикальное смещение относительно изображения.,Соответствует указателю мыши.

Создает полупрозрачное изображение из цели перетаскивания (элемента, на котором срабатывает событие перетаскивания) и следует за указателем мыши во время перетаскивания. Это изображение создается автоматически, вам не нужно создавать его самостоятельно. Однако, если вы хотите установить собственное изображение, тогда DataTransfer.setDragImage() метод пригодится. Изображение обычно представляет собой <image> элемент,Но это также может быть<canvas> или любой другой элемент изображения.

Здесь необходимо уделить особое внимание. Элемент element должен отображаться внутри страницы.

Подробности можно посмотреть:https://www.kryogenix.org/code/browser/custom-drag-image.html

Эта статья все очень ясно прояснила.

Примечания к setData:

DataTransfer.getData() не может получить данные при перетаскивании, перетаскивании и перетаскивании.

Набор данных в dataTransfer.setData() хранится в хранилище данных перетаскивания. Согласно стандарту W3C хранилище данных перетаскивания имеет три режима: режим чтения/записи, режим только для чтения и защищенный режим.

5.7.2 Определение трех режимов хранения данных перетаскивания в рабочем проекте W3C.

A drag data store mode, which is one of the following:

  • Режим чтения/записи
    • For the dragstart event. New data can be added to the drag data store.
    • Режим чтения/записи, используемый в событии перетаскивания, может добавлять новые данные к перетаскиванию. data в магазине.
  • Режим только для чтения
    • For the drop event. The list of items representing dragged data can be read, including the data. No new data can be added.
    • При использовании в событии перетаскивания перетаскиваемые данные можно прочитать, но добавить новые данные невозможно.
  • Защищенный режим
    • For all other events. The formats and kinds in the drag data store list of items representing dragged data can be enumerated, but the data itself is unavailable and no new data can be added.
    • Как и во всех других событиях, список данных можно перечислить, но сами данные недоступны и новые данные добавить нельзя.

    Подробности смотрите в официальной документации.:https://html.spec.whatwg.org/multipage/dnd.html#drag-data-store

Это может объяснить, почему данные, возвращаемые dataTransfer.getData() при перетаскивании, пусты.,И тип dataTransfer не равен 0 во время перетаскивания.,因для在Помимо событий, отличных от перетаскивания и отпускания, включая перетаскивание, перетаскивание и перетаскивание, хранилище данных перетаскивания находится в защищенном режиме по соображениям безопасности и поэтому недоступно.

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

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

dataTransferProperty

Свойства dropEffect и effectAllowed

Укажите эффект, разрешенный для операции перетаскивания, например: dataTransfer.effectAllowed = «move».

  1. effectAllowed 用来指定当элемент被拖放式所允许из视觉效果(Действует на перетаскиваемый элемент)。еслиeffectAllowedсвойство是定дляnone,Перетаскивание элементов не допускается.
  2. dropEffect   Визуальные эффекты, представляющие операции перетаскивания(Действует на целевой элемент),еслиdropEffect Если для свойства установлено значение none, перетаскивание в целевой элемент не допускается.

Это должно быть установлено в событии перетаскивания, чтобы установить желаемый эффект перетаскивания для источника перетаскивания. существовать dragenter и драговер обработчик событий, свойство будет установлено в значение перетаскивания Любое значение, присвоенное во время события, поэтому effectAllowed можно использовать для определения того, какие эффекты разрешены. Его значения следующие:

  • эффект Разрешенценить
    • uninitialized:没иметь该被拖动элемент放置行для。
    • none:перетаскиваемый элемент не может вести себя никак.
    • copy:只允许ценитьдля“copy”изdropEffect。
    • link:只允许ценитьдля“link”изdropEffect。
    • move:只允许ценитьдля“move”изdropEffect。
    • copyLink:允许ценитьдля“copy”и“link”изdropEffect。
    • copyMove:允许ценитьдля“copy”и”link”изdropEffect。
    • linkMove:Разрешенные позиции“link”и”move”изdropEffect。
    • all:Разрешить любыеdropEffect。
  • значение dropEffect
    • none:不能把拖动изэлемент放在这里。这是除文本框之外所иметьэлементиз默认ценить。
    • move:应该把拖动изэлемент移动сбросить цель
    • copy:应该把拖动изэлементкопироватьсбросить цель
    • link:表示放置目标会打开拖动изэлемент(但拖动изэлемент必须是一个链接,с URL)

chrome По умолчанию отображается зеленый знак плюса, настройка: $event.dataTransfer.effectAllowed. = 'двигаться'. чтобы вернуться к стилю мыши по умолчанию

Атрибут файлов

Возвращает список перетаскиваемых файлов,Является объектом FileList,иметьlengthсвойство,Доступно через индекс. Эту функцию можно использовать для перетаскивания файлов с рабочего стола пользователя в браузер. Обычно используется с FileReader для обработки файлов. Например, FileReader.readAsDataURL и FileReader.onload.

Реализация сортировки путем перетаскивания элементов

Раньше я писал две статьи, и некоторые читатели оставили сообщения в надежде увидеть код. На этот раз я написал грубо.

https://codepen.io/lujun-zhou/pen/KKmNgxv

реализация vue

https://codepen.io/lujun-zhou/pen/zYwozMZ

То же самое касается сортировки вкладок MagicBox, в которой используется это решение.

Регулировка положения и размера элемента холста

Вы можете сначала просмотреть его《Давайте поговорим о BOMиDOM(6): вычисление битового значения объекта DOM и объекта события, например offsetX/Top, clentX.

Если вы используете управление событиями мыши, это становится очень сложным. Обычно это реализуется с использованием сторонних библиотек, таких как Interact.js, vue-drag-resize и т. д.

Если вы используете изменение размера CSS напрямую, а затем вызываете изменение размера через resizeObserve, реализация становится намного проще.

Эта идея была предложена ранее,нравиться《Оптимизация отложенной загрузки: JavaScript IntersectionObserver API отслеживает видимость элементов》。

Вот примерный код реализации:

https://codepen.io/lujun-zhou/pen/jOmVLGy

Раньше я делал версию, похожую на DataV, которая напрямую использует html5. Написано родным свойством.

canvas Реализация холста:https://codepen.io/atindo23/pen/OJLbdrJ

Управление элементом масштабирования мыши

Нет необходимости говорить слишком много о масштабировании событий. Случай с MDN хорошо описан.

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onwheel

Справочная статья:

HTML5 — перетаскивание событий и объектов. dataTransfer https://blog.csdn.net/hjc256/article/details/89021483

Поговори об этом HTML dropEffect в и effectAllowed https://blog.csdn.net/gggg5643/article/details/52135824

HTML5 Продвинутая серия: перетаскивание API Реализация сортировки перетаскиванием - Статьи Линь Синя - Чжиху https://zhuanlan.zhihu.com/p/26666141

Учебное пособие по технологии внешнего интерфейса HTML5: перетаскивание H5 - Статьи Фан Вэйцзин - Чжиху https://zhuanlan.zhihu.com/p/47458212

Встроенное перетаскивание HTML5 (перетаскивание & падение) подробное объяснение https://www.cnblogs.com/weiqinl/p/7886049.html

HTML5 Тащить и Дроп) подробное объяснение и примеры https://www.cnblogs.com/moqiutao/p/6365113.html

DataTransfer.getData() не может получить данные при перетаскивании, перетаскивании и перетаскивании. https://blog.csdn.net/azureternite/article/details/51415359

ПерепечаткаЭтот сайтстатья《Подробное объяснение события перетаскивания: анализ и практика решений по сортировке перетаскивания мыши и изменению размера HTML5.》, Пожалуйста, укажите источник:https://www.zhoulujun.cn/html/webfront/SGML/html5/2016_0124_434.html

boy illustration
Учебное пособие по Jetpack Compose для начинающих, базовые элементы управления и макет
boy illustration
Код js веб-страницы, фон частицы, код спецэффектов
boy illustration
【новый! Суперподробное】Полное руководство по свойствам компонентов Figma.
boy illustration
🎉Обязательно к прочтению новичкам: полное руководство по написанию мини-программ WeChat с использованием программного обеспечения Cursor.
boy illustration
[Забавный проект Docker] VoceChat — еще одно приложение для мгновенного чата (IM)! Может быть встроен в любую веб-страницу!
boy illustration
Как реализовать переход по странице в HTML (html переходит на указанную страницу)
boy illustration
Как решить проблему зависания и низкой скорости при установке зависимостей с помощью npm. Существуют ли доступные источники npm, которые могут решить эту проблему?
boy illustration
Серия From Zero to Fun: Uni-App WeChat Payment Practice WeChat авторизует вход в систему и украшает страницу заказа, создает интерфейс заказа и инициирует запрос заказа
boy illustration
Серия uni-app: uni.navigateЧтобы передать скачок значения
boy illustration
Апплет WeChat настраивает верхнюю панель навигации и адаптируется к различным моделям.
boy illustration
JS-время конвертации
boy illustration
Обеспечьте бесперебойную работу ChromeDriver 125: советы по решению проблемы chromedriver.exe не найдены
boy illustration
Поле комментария, щелчок мышью, специальные эффекты, js-код
boy illustration
Объект массива перемещения объекта JS
boy illustration
Как открыть разрешение на позиционирование апплета WeChat_Как использовать WeChat для определения местонахождения друзей
boy illustration
Я даю вам два набора из 18 простых в использовании фонов холста Power BI, так что вам больше не придется возиться с цветами!
boy illustration
Получить текущее время в js_Как динамически отображать дату и время в js
boy illustration
Вам необходимо изучить сочетания клавиш vsCode для форматирования и организации кода, чтобы вам больше не приходилось настраивать формат вручную.
boy illustration
У ChatGPT большое обновление. Всего за 45 минут пресс-конференция показывает, что OpenAI сделал еще один шаг вперед.
boy illustration
Copilot облачной разработки — упрощение разработки
boy illustration
Микросборка xChatGPT с низким кодом, создание апплета чат-бота с искусственным интеллектом за пять шагов
boy illustration
CUDA Out of Memory: идеальное решение проблемы нехватки памяти CUDA
boy illustration
Анализ кластеризации отдельных ячеек, который должен освоить каждый&MarkerгенетическийВизуализация
boy illustration
vLLM: мощный инструмент для ускорения вывода ИИ
boy illustration
CodeGeeX: мощный инструмент генерации кода искусственного интеллекта, который можно использовать бесплатно в дополнение к второму пилоту.
boy illustration
Машинное обучение Реальный бой LightGBM + настройка параметров случайного поиска: точность 96,67%
boy illustration
Бесшовная интеграция, мгновенный интеллект [1]: платформа больших моделей Dify-LLM, интеграция без кодирования и встраивание в сторонние системы, более 42 тысяч звезд, чтобы стать свидетелями эксклюзивных интеллектуальных решений.
boy illustration
LM Studio для создания локальных больших моделей
boy illustration
Как определить количество слоев и нейронов скрытых слоев нейронной сети?
boy illustration
[Отслеживание целей] Подробное объяснение ByteTrack и детали кода