HTML5 Drag & Drop Изменить значок / курсор при перетаскивании

Мне интересно, как изменить значок / курсор при перетаскивании (перетаскивание / перетаскивание), например, когда я перетаскиваю, например, чтобы запретить или разрешить раздел. Конечно, я могу перемещать курсором часть DOM, расположенную абсолютно, но я заинтересован в собственном решении HTML5.

Спасибо!

 Akhil Gupta11 нояб. 2015 г., 18:31
Я ищу что-то подобное. Пожалуйста, вы можете сказать мне, если вы получите ответ на это?
 Vael Victus04 апр. 2018 г., 02:22
Будущие гуглеры: до сих пор нет отличного, простого и кросс-браузерного решения; если вы можете, просто перейдите в библиотеку Javascript, такую как Dragula.

Ответы на вопрос(4)

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

https://kryogenix.org/code/browser/custom-drag-image.html

который может быть полезен немногим. Используйте этот класс в элементе html.

.grab {
        cursor: move;
        cursor: grab;
        cursor: -moz-grab;
        cursor: -webkit-grab;
        .thumbnails-list{
            cursor: pointer;
        }
    }

    .grab:active {
        cursor: grabbing;
        cursor: -moz-grabbing;
        cursor: -webkit-grabbing;
    }
 15 февр. 2019 г., 18:24
Это прекрасно работает, пока я не начну перетаскивать. Затем курсор просто переключается обратно на значение по умолчанию.

http://jsfiddle.net/rvRhM/1/

Посмотрите на драгстарт и драгенд события.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;
});

Обязательно сбросьте курсор при перетаскивании:

EventUtil.addHandler(dm, 'dragend', function(e) {  
    var target = EventUtil.getCurrentTarget(e);
    target.style.backgroundColor = '';
    target.style.cursor = 'default'; // Reset cursor
    return true;
});
 23 янв. 2016 г., 01:21
dataTransfer поддерживается только в FF.
 26 апр. 2016 г., 19:12
Не работает в Chrome для меня
 Alex Ivasyuv12 апр. 2012 г., 11:12
Спасибо за ответ! Но мне нужно изменить во время перетаскивания / dragover в зависимости от того, есть ли у меня доступ перетащить элемент в него или нет. Кстати, этот пример не работает в Chrome 18 (OS X).
 12 апр. 2012 г., 11:56
Да, не только Chrome, но и Safari, и я не совсем уверен, почему, потому что это простой старый javascript. Это работает в Firefox. Что касается вашей другой проблемы, вам необходимо установить какое-то соединение между перетаскиваемым элементом и зоной отбрасывания (с помощью id, cssClass и т. Д.), Чтобы вы могли определить, какой перетаскиваемый элемент разрешен в какую зону сброса. Тогда вы можете стилизовать Draggable соответственно.

dropEffect:

Инициализируйте его в dragstart:

event.dataTransfer.effectAllowed = "copyMove";

Обновите его в драгентере:

event.dataTransfer.dropEffect = "copy";
 03 мар. 2018 г., 15:34
не работает в хроме
 19 февр. 2013 г., 11:45
Я обновил вышеупомянутый JSFiddle дляjsfiddle.net/rvRhM/192 следовать вашей рекомендации. Он работает в Chrome, но Firefox не меняет курсор (версии, актуальные на момент написания ...). Спасибо за совет в любом случае.
 05 мая 2016 г., 23:14
Работает в Firefox v45 :)

Ваш ответ на вопрос