0

a very simple question - but did not found a simple answer. I want to enable drag events (onDragStart,onDrag,onDragEnd etc) on an element, but I don't want the element to animate drag when trying to drag (like when passing draggable to the component does). how do I achieve this?

<div
  onDragStart={() => console.log("onDragStart")} //does not fire
  // draggable   // dont want this - or just disable animation when trying to drag
>
  someContent
</div>
Eliav Louski
  • 3,593
  • 2
  • 28
  • 52
  • What do you mean by animation? Avatar? – 17axaH Jun 15 '20 at 15:03
  • Just need the html [draggable](https://www.w3schools.com/tags/att_global_draggable.asp) attribute for certain elements – Reyno Jun 15 '20 at 15:05
  • If an avatar, you can turn it off or even make your own. You cannot do without the draggable attribute. Or you have to write all the logic yourself. – 17axaH Jun 15 '20 at 15:05
  • See https://stackoverflow.com/questions/20926551/recommended-way-of-making-react-component-div-draggable – jmkmay Jun 15 '20 at 15:06
  • Does this answer your question? [Recommended way of making React component/div draggable](https://stackoverflow.com/questions/20926551/recommended-way-of-making-react-component-div-draggable) – jmkmay Jun 15 '20 at 15:06
  • absolutely no @jmkmay , i'm interested in react EVENTS not to make it actually draggable. – Eliav Louski Jun 15 '20 at 16:26

1 Answers1

2

After trying a bit myself, I came to the answer. pass draggable to enable drag events on the element, and to disable animation prevent default on onDragStart.

will leave the answer here if anyone will also need it.

<div
  onDragStart={(e) => {
              console.log("onDragStart") // do what you need here
              e.preventDefault();        // then prevent animation
            }}
  draggable   
>
  someContent
</div>

EDIT

this is some advancement but not answers fully answer my question. what I did is not canceling the animation, but actually canceling animation and all the drag events coming next on the same element. but I need this element to fire on onDrop event(I did not forget to e.preventDefault() on onDragOver). i need the onDrop event to fire. so I can I truly disable animation but let the rest of the drag events fire regularly?

Codesandbox

https://codesandbox.io/s/drag-with-not-animation-b3eh7?file=/src/App.js come'on guys. you can do it. here's a sample

got it

finally got it. it is possible to disable animation by passing empty image to the draged element, by using DataTransfer.setDragImage() function.

const emptyImg = new Image();
<div
  onDragStart={(e) => e.dataTransfer.setDragImage(emptyImg, 0, 0)}
  draggable   
>
  someContent
</div>

EDIT: NO

I still need help here. you can turn off the animation, but the behavior would still be as a draggable element.

I just need to turn on drag Event but without enable the draggable browser behavior for the element.

help!

Eliav Louski
  • 3,593
  • 2
  • 28
  • 52