Связь между этими двумя свойствами, по-видимому, была источником некоторой путаницы. На основе чтения сайта MDN и MSDN я подумал, что я понял это, но теперь я не уверен...
Я понял, что когда элемент перетаскивается, вы можете указать, что ему разрешено (т.е. его можно переместить, скопировать, связать с одной из констант effectAllowed). Это свойство effectAllowed.
Различные цели капли делают разные вещи, поэтому, когда вы перетаскиваете другой элемент, он может контролировать, какой "эффект" имеет место при падении, это свойство "dropEffect". Поэтому я создал простой пример, чтобы проверить эту теорию.
$("[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 ведет себя так, как я ожидал. Это потому, что другой браузер ошибочен или потому, что я не понимаю спецификацию. правильно?
UPDATE Еще немного информации от этого.
Как в Firefox, так и в Chrome, если у вас есть dragsource, который указывает, что effectAllowed является "копией" и dropzone, в котором говорится, что dropEffect "перемещается", вы не можете попасть в зону выпадения, даже если вы отмените событие. Я подумал, что dropEffect было бы полезно прочитать ondrop, чтобы посмотреть, что делать, но он недоступен в Chrome, dropEffect не появляется в обработчике drop, например. пытаясь прочитать dataTransfer.dropEffect скажет, что dropEffect "нет", даже если вы установите его на dragover. Установка dropEffect, как указано выше, влияет на способ отображения курсора.
В Firefox, dropEffect проникает в dropzone после установки на dragover, но это не влияет на отображение курсора мыши. В окнах Firefox нажатие клавиши ctrl влияет на отображение мыши, но не влияет на свойство dropEffect.
Спектр показывает, что источник может прослушивать событие dragend, чтобы узнать, что произошло. Он должен посмотреть на dropEffect в этом событии. Chrome, Mozilla и Safari работают так, как вы надеялись, эффект drop появляется в событии dragend. В IE, если разрешенный эффект является простым значением, например. "copy", то любое успешное падение приводит к этому значению, появляющемуся как dropEffect для dragend. Если effectAllowed был составным значением, таким как copyMove, и вы попытались выбрать "move" при перетаскивании, установив dropEffect, вам не повезло, это произойдет через dropEffect = "none" в источнике на dragend. Вы застряли с одним курсором и одним эффектом dropEffect, и это effectAllowed set на dragstart, если этот эффект является простым значением. Интересно, что dropEffect, похоже, происходит, когда вы перетаскиваете в собственное приложение из IE11 по крайней мере (и я предполагаю, что раньше).
Другие примечания
В Safari на mac-effectAllowed не может быть установлен программно, поэтому любой dropEffect, который получает set, действителен. Когда вы нажимаете клавишу cmd, эффектAllowed становится "перемещением", и когда вы нажимаете клавишу alt, эффектAllowed становится "копией". После этого он работает так, как вы надеетесь, если dropEffect не является одним из этих effectAlloweds, броуз не разрешен браузером.
Дополнительная информация Я потратил некоторое свободное время на работу с библиотекой перетаскивания HTML5. Я написал дополнительную информацию об этом и других проблемах в документах, если вы заинтересованы, пожалуйста, взгляните на проект
