HTML5 Drag and Drop effectAllowed and dropEffect ⇐ Html

[Anonymous]

Отношения между этими двумя свойствами, похоже, стали источником некоторой путаницы. Прочитав сайт MDN и MSDN, я подумал, что понял это, но теперь я не уверен...
Я понял, что при перетаскивании элемента вы можете указать, что с ним может произойти (т. е. его можно перемещать, копировать, связывать с ним — одна из констант effectAllowed). Это свойство effectAllowed.
Различные цели перетаскивания выполняют разные действия, поэтому при перетаскивании другого элемента можно контролировать, какой «эффект» произойдет при перетаскивании. Свойство dropEffect. Поэтому я привел простой пример, чтобы проверить эту теорию:
JSFiddle

Код: Выделить всё

$("[draggable='true']").on("dragstart", function(e) {
var dt =  e.originalEvent.dataTransfer;
dt.effectAllowed = "copyMove";
dt.setData("text/plain", "Foo");
});

$("#dropZoneCopy").on("dragover", function(e) {
var dt =  e.originalEvent.dataTransfer;
dt.dropEffect = "copy";
e.preventDefault();
});

$("#dropZoneMove").on("dragover", function(e) {
var dt =  e.originalEvent.dataTransfer;
dt.dropEffect = "move";
e.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. Я написал много больше об этой и других проблемах в документации к ней. Если вам интересно, пожалуйста, взгляните на
проект

Подробнее здесь: https://stackoverflow.com/questions/204 ... dropeffect