Мне интересно, как изменить во время перетаскивания (dragover/dragenter) значок/курсор, когда я, например, перетаскиваю, чтобы запретить или разрешить раздел. Конечно, я могу передвигаться с курсором, часть DOM позиционируется абсолютно, но меня интересует собственное решение HTML5.
Спасибо!
Вы после dropEffect:
Инициализировать его в dragstart:
event.dataTransfer.effectAllowed = "copyMove";
Обновить его в dragenter:
event.dataTransfer.dropEffect = "copy";
У меня есть отдельный пример перетаскивания HTML5 с помощью crossbrowser: http://jsfiddle.net/rvRhM/1/
Посмотрите на события dragstart и dragend. dm - элемент, который перетаскивается.
EventUtil.addHandler(dm, 'dragstart', function(e) {
e.dataTransfer.setData(format, 'Dragme');
e.dataTransfer.effectAllowed = effect;
var target = EventUtil.getCurrentTarget(e);
target.style.backgroundColor = 'blue';
target.style.cursor = 'move'; // You can do this or use a css class to change the cursor
return true;
});
Убедитесь, что курсор reset при перетаскивании заканчивается:
EventUtil.addHandler(dm, 'dragend', function(e) {
var target = EventUtil.getCurrentTarget(e);
target.style.backgroundColor = '';
target.style.cursor = 'default'; // Reset cursor
return true;
});
Я пытался добиться того же и не мог найти хорошего решения. В конце концов, я сделал настройку изображения на dataTransfer и изменил его src с каждым действием. Таким образом, поведение по-разному согласовано между браузерами. Здесь ссылка на страницу, которую я использовал в качестве ссылки: