В Firefox и IE как можно изменить курсор, перетаскивая разные цели?

Выполняя перетаскивание в HTML5, мне нужно изменить курсор в зависимости от целевой цели. В Chrome это работает, изменяя dropEffect,

 if (e.currentTarget.id == 'dropMove') {
     e.originalEvent.dataTransfer.dropEffect = 'move';
 } else {
     e.originalEvent.dataTransfer.dropEffect = 'link';
 }

однако изменение dropEffect в IE и Firefox не влияет на курсор. См. Следующий скрипт:

http://jsfiddle.net/ksoncan34/s7kN5/

Я попытался вручную установить курсор с помощью window.cursor, но это также не имеет никакого эффекта. Как изменить курсор для разных целей кавычки в Firefox и IE?

Ответ 1

Я бы посоветовал использовать jQuery ui - с возможностью перетаскивания и перетаскивания.

Вы можете скрыть курсор по умолчанию/фактический, используя cursor: none, и использовать стилизованный элемент DOM, чтобы отобразить свой собственный элемент "курсора".

Я привел пример здесь: http://jsfiddle.net/lawrencealan/WMyu7/78/ (обновлено 06.08.2017)

Примечание. mousemove прекращает работу при перетаскивании "перетаскиваемых" приписанных элементов.

ОБНОВЛЕНИЕ: По состоянию на сентябрь 2019 года пример теперь не работает.

Ответ 2

К сожалению, поддержка изменения курсора на .dropeffect кажется недостаточной.

Вы можете попытаться присоединить элемент к координатам мыши X и Y и манипулировать им, когда он движется, но он может стать беспорядочным. Я думаю, что lawrencealan jQuery UI solution, который делает именно это, вероятно, единственный надежный способ сделать это... и на самом деле довольно просто. Тем не менее, я хотел бы предложить альтернативу, которая может удовлетворить ваши потребности так же хорошо, и не требует пользовательского интерфейса jQuery:

Альтернатива:

Вместо того, чтобы привязывать код к mousemove и иметь дело с ненадежными манипуляциями с курсором, я бы предложил просто изменить цели, когда вы перетаскиваете их.

Например: jsfiddle

Добавьте что-то вроде этой функции dragover:

$(this).addClass('draggedover');

Обязательно удалите его на dragleave:

$('.drop').bind('dragleave', function (e) {
    $(this).removeClass('draggedover');
});

И затем добавьте CSS, чтобы идти вместе с ним:

.draggedover::before {
    content: '';
    background-image: url('http://i.stack.imgur.com/czlkT.jpg');
    width: 40px;
    height: 40px;
    position: absolute;
    right: 0;
    top: 0;
    overflow: hidden;
}
#dropMove.draggedover::before {
    background-position: -110px -70px;
}

#dropLive.draggedover::before {
    background-position: -5px -10px;
}

Ответ 3

Я нашел эту ссылку при поиске: https://connect.microsoft.com/IE/feedback/details/780585/dropeffect-not-working-properly-in-ie-standard-mode-ie9-ie10

Похоже, Microsoft отвергает это, работая по дизайну. Что может помочь, это третий комментарий, который предлагает способ исправить проблему юзабилити. Однако он не разделял никакого кода.