0

How do I change the cursor style while dragging in Mozilla Firefox?

onDragStart(e) {
        e.dataTransfer.setData('text/plain', e.target.id)
        this.dragedItem = e.target
    }

    onDragOver(e) {
        e.dataTransfer.dropEffect = 'move'
        e.preventDefault()
    }

    onDragEnd(e) {
        this.dragedItem.style.display = 'block'
    }

    onDragEnter(e) {
        e.preventDefault()
        e.currentTarget.className += ' hovered'
    }

    onDragLeave(e) {
        e.preventDefault()
        e.currentTarget.className = 'item-slot'
    }

    onDragDrop(e) {
        e.currentTarget.className = 'item-slot'
        e.target.appendChild(this.dragedItem)

    }

I want the dropEffect to be move but i don't want the default cursor style.

Lisandro Pastinante
  • 51
  • 1
  • 7

1 Answers1

0

You could change the cursor style of the body element through css. This way, the cursor style would be altered. Here are the different possible stylings :https://www.w3schools.com/cssref/pr_class_cursor.asp

you could go like this:

onDragStart(e) { document.body.style.cursor = "pointer"} onDragEnd(e) { document.body.style.cursor = "default"}

Plemo
  • 51
  • 5
  • I tried that but it seems mozilla overrrides the style while dragging – Lisandro Pastinante Apr 10 '19 at 15:01
  • Oh, you are right. Then look at this question: https://stackoverflow.com/questions/10119514/html5-drag-drop-change-icon-cursor-while-dragging There you will find this fiddle: http://jsfiddle.net/rvRhM/1/ When you create a new EventHandler, which listens to the document.body element, it should work – Plemo Apr 10 '19 at 16:14
  • It seems me and Alex Ivasyuv have the same problem. The answers on his post don't help me neither. But thank you so much for your time! – Lisandro Pastinante Apr 11 '19 at 00:34