HTML5 Drag and Drop effectAllowed and dropEffect ⇐ Jquery

[Гость]

Отношения между этими двумя свойствами, похоже, стали источником некоторой путаницы. Прочитав сайт MDN и MSDN, я думал, что понял это, но теперь я не уверен...

Я решил, что когда элемент перетаскивается, вы можете указать, что с ним может происходить (т. е. его можно перемещать, копировать, связывать с ним — одна из констант effectAllowed). Это свойство effectAllowed.

Различные цели перетаскивания выполняют разные действия, поэтому, когда вы перетаскиваете другой элемент, он может контролировать, какой «эффект» произойдет при перетаскивании, это свойство «dropEffect». Поэтому я привел простой пример, чтобы проверить эту теорию:

JSFiddle

$("[draggable='true']").on("dragstart", function(e) { вар dt = e.originalEvent.dataTransfer; dt.effectAllowed = «copyMove»; dt.setData("text/plain", "Foo"); }); $("#dropZoneCopy").on("dragover", function(e) { вар dt = e.originalEvent.dataTransfer; dt.dropEffect = "копировать"; е.preventDefault(); }); $("#dropZoneMove").on("dragover", function(e) { вар dt = e.originalEvent.dataTransfer; dt.dropEffect = "переместить"; е.preventDefault(); }); У меня есть поле, которое пользователь может перетаскивать. Разрешены эффекты «copyMove». У меня есть одно поле, которое устанавливает dropEffect для копирования, а затем устанавливает dropEffect для перемещения. Я ожидаю, что когда пользователь перетаскивает «поле копирования», курсор изменится, указывая на то, что произойдет копирование, а когда я перетаскиваю «поле перемещения», курсор изменится, указывая на перемещение...

Только Chrome ведет себя так, как я ожидал. Это потому, что другие браузеры ошибаются, или потому, что я не понимаю спецификацию. правильно?

ОБНОВЛЕНИЕ Еще немного информации о возне с этим;

И в Firefox, и в Chrome, если у вас есть источник перетаскивания, который указывает, что effectAllowed имеет значение «копировать», и зону сброса, в которой указано, что dropEffect — это «перемещение», то вы не сможете переместить объект в зону перетаскивания, даже если отмените событие. Я подумал, что dropEffect было бы полезно прочитать ondrop, чтобы узнать, что делать, но он недоступен в Chrome, dropEffect не отображается в обработчике drop, например попытка прочитать dataTransfer.dropEffect скажет, что dropEffect равен «none», даже если вы установили его при перетаскивании. Установка dropEffect, как указано выше, влияет на способ отображения курсора.

В Firefox эффект dropEffect действует в зоне перетаскивания после установки при перетаскивании, но он не влияет на отображение курсора мыши. В окнах Firefox нажатие клавиши Ctrl влияет на отображение мыши, но не влияет на свойство dropEffect.

Спецификация показывает, что источник может прослушивать событие перетаскивания, чтобы увидеть, что произошло. Он должен просмотреть dropEffect внутри этого события. Chrome, Mozilla и Safari здесь работают так, как и следовало ожидать, эффект перетаскивания появляется в событии перетаскивания. В IE, если разрешенный эффект является простым значением, например. «копировать», то любое успешное перетаскивание приведет к тому, что это значение появится как dropEffect при перетаскивании. Если effectAllowed был составным значением, например copyMove, и вы попытались выбрать «перемещение» при перетаскивании, установив dropEffect, вам не повезло, в источнике при перетаскивании это произойдет как dropEffect = «none». Вы застряли с одним курсором и одним dropEffect, и это effectAllowed, установленный при перетаскивании, если этот эффект является простым значением. Интересно, что dropEffect, похоже, действительно проявляется, когда вы перетаскиваете его в собственное приложение, по крайней мере, из IE11 (и я предполагаю, что раньше).

Другие примечания

В Safari на Mac — effectAllowed нельзя установить программно, поэтому любой установленный dropEffect действителен. Когда вы нажимаете клавишу cmd, effectAllowed становится «переместить», а когда вы нажимаете клавишу alt, effectAllowed становится «копировать». После этого все работает так, как и следовало ожидать, если dropEffect не является одним из этих effectAlloweds, браузер не разрешает удаление.

Дополнительная информация Я потратил некоторое свободное время на работу над библиотекой перетаскивания HTML5. Я написал еще много об этой и других проблемах в документации к ней. Если вам интересно, пожалуйста, взгляните на проект