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

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

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

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

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

<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 -> dragenter -> dragover -> dragleave -> drop ->dragend

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

drop：источник Перетащите объект в целевой объект,Срабатывает, когда целевой объект полностью принимает перетаскиваемый объект.,Его можно понимать как срабатывание при отпускании целевого объекта.

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

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

el.ondragover = function(e){
   e.preventDefault();
}
el.ondrop = function(e){
 e.preventDefault();
}

В проекте vue:

@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 определяет множество свойств и методов. Давайте рассмотрим некоторые из стандартных.

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

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