HTML5 native Drag 'n' Drop - обнаружение отмены

Мне нужно реализовать drag 'n' падение элементов HTML между окнами браузера.HTML5 native Drag 'n' Drop - обнаружение отмены

Когда элемент отбрасывается из окна A в окно B, его необходимо удалить из окна A (и добавить в окно B).

Когда отменяется перетаскивание «n» (происходит, когда пользователь нажимает клавишу «esc», или иногда, когда функция перетаскивания «n» кажется ошибкой), элемент должен вернуться в исходное местоположение.

В настоящее время я делаю, чтобы сохранить флаг «hasBeenDropped», для которого установлено значение false в dragstart, и true в drop. В dragend я проверяю свой флаг, и если он не установлен в true, это означает, что кадр был запущен в другом окне или операция была отменена. Мне нужно различать эти два случая (отбросить в другое окно и отменить), чтобы действовать соответствующим образом (например, удалите окно или замените его на свое исходное местоположение).

TL; Мне нужно определить, когда была отменена собственная операция перетаскивания «n» в формате HTML5 (например, когда пользователь нажимает клавишу «esc»).

Есть ли способ сделать это ??

источник

2015-11-10 Tim Autin

Любые удачи здесь? Я просто наткнулся на это сам. У меня есть точный вид флага, который вы сохраняете, чтобы отслеживать успешное падение, но дифференциация между различными режимами аннулирования аналогично требуется для нашего приложения. Я попытался внимательно изучить события, чтобы найти что-то, что можно отследить, но до сих пор мне повезло с firefox. – kamelkev

Извините, похоже, на данный момент нет способа. С тех пор я сменил свою работу, поэтому я больше не работаю над этим, но мне не удалось заставить его работать так, как я хотел. IIRC, что я сделал, это сделать копию вместо перемещения (при этом в окне начала не нужно событие drop). –

-1

Событие dragend запускается при завершении операции перетаскивания (путем отпускания кнопки мыши или нажатия клавиши эвакуации). Вы можете проверить свойство события "ctrlKey". Если это правда, нажата кнопка Esc. Вы также можете проверить другие свойства, если это необходимо. Посмотрите на ссылку, например, здесь: https://developer.mozilla.org/en-US/docs/Web/Events/dragend

Лучший, Алекс

источник

2015-11-10 14:59:50 AlexL

Спасибо, но ctrlKey является ложным при отмене операции с помощью ключа esc (по крайней мере для меня, в Firefox, Chrome и Safari), что нормально. –

Привет, Тим, да, правильно. Кажется, я смешал его, извините. Итак, я бы использовал событие drop и посмотрел, можете ли вы обнаружить это окно, используя свойства target или view события drop.Я хотел бы надеяться, что вы сможете использовать их для получения элемента, который вы удаляете, или окна, в которое вы бросаете. Вы уже посмотрели на это? – AlexL

Хорошая идея, я не проверял это. Но, к сожалению, он тоже не работает, целевой элемент всегда является перетаскиваемым элементом HTML, и представление всегда является текущим окном (если я перетаскиваю из окна A в окно B, я получаю окно A в окне A dragend и окно B в падение окна B. Мне нужно будет получить окно B в окне A dragend). –

Как и вы, я использовал флаг, чтобы определить, действительно ли успешно произошло падение в других местах, которые более или менее означает, что она hasn Отменить. Однако, как представляется, более правильным способом, как описано в MDN:

Finishing a Drag 

Once the drag is complete, a dragend event is fired at the source of the drag (the same element that received the dragstart event). This event will fire if the drag was successful[1] or if it was cancelled. However, you can use the dropEffect property to determine what drop operation occurred. 

If the dropEffect property has the value none during a dragend, then the drag was cancelled. Otherwise, the effect specifies which operation was performed. The source can use this information after a move operation to remove the dragged item from the old location. The mozUserCancelled property will be set to true if the user cancelled the drag (by pressing Escape), and false if the drag was cancelled for other reasons such as an invalid drop target, or if it was successful.

БРАУЗЕРА MOZILLA специфическое свойство, очевидно, нежелательно, но само свойство dropEffect должно быть достаточно для большинства целей. Я тестировал его сам (плитки втягиваются в dropzones в iframe), и он, казалось, работал, как ожидалось.

Это берется непосредственно из текущей страницы MDN по теме:

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#dragend

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

источник

2016-04-26 06:10:02 kamelkev

Спасибо, что нашли время ответить, кажется, действительно, путь. Я поддержал ваш ответ. –

HTML5 native Drag 'n' Drop - обнаружение отмены

ответ

Смежные вопросы