javascript - "onDrag" event not getting triggered in react.js - Stack Overflow

admin管理员组

文章数量:1178545

<div className="kat-project-user-timeline-drag-indicator-wrapper-bottom"
     onDrag={(event) => {this.dragTask(event)}}>
</div>

dragTask(event) {
  console.log("logic goes here")
}

The function is not getting called for the first time. But from second time it is working fine. I tried using, event.preventDefault(), but still it is not working.

<div className="kat-project-user-timeline-drag-indicator-wrapper-bottom"
     onDrag={(event) => {this.dragTask(event)}}>
</div>

dragTask(event) {
  console.log("logic goes here")
}

The function is not getting called for the first time. But from second time it is working fine. I tried using, event.preventDefault(), but still it is not working.

• javascript
• reactjs

Share Improve this question Follow edited Jun 23, 2016 at 13:45 Nhan 3,88566 gold badges3434 silver badges4040 bronze badges asked Jun 23, 2016 at 12:54 Amala JamesAmala James 1,48633 gold badges1717 silver badges3333 bronze badges 4

• When you state: The function is not getting called for the first time, do your logic do anything with a click? also, are you moving (dragging), or just pressing the div without moving mouse/finger? – Bonatti Commented Jun 23, 2016 at 13:47
• I'm also running into this problem - the very first time I drag an element no drag event is fired, but it is then fired on the second time without fail. Amala - are you using jQuery on the same page? I've not been able to find any answers after spending several hours on this, so now I'm trying to eliminate scripts to see if there is any interference. – jacobedawson Commented Jul 12, 2016 at 15:53
• @jacobedawson i found the issue. I was using a library for drag and drop which was overriding my function call for the first time. it worked when i removed the library. I am not using jQuery but react.js – Amala James Commented Jul 21, 2016 at 11:42
• 1 is the problem resolved after removing the library? @AmalaJames, you could vote to close the question as not reproducible / fixed. – vijayst Commented Aug 7, 2016 at 11:12

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 36

Try adding draggable="true" and see if that works:

<div draggable="true" className="kat-project-user-timeline-drag-indicator-wrapper-bottom"
 onDrag={(event) => {this.dragTask(event)}}>
</div>

dragTask(event) {
  console.log("logic goes here")
}

1. Set the ondragstart event too, to the same function set to onDrag event
2. set draggable="true".

Make the element draggable and Try onDragStart().

    <div className="kat-project-user-timeline-drag-indicator-wrapper-bottom"
draggable={true} onDragStart={handleOnDrag}>
    DRAGGABLE ELEMENT 
    </div>

本文标签： javascriptquotonDragquot event not getting triggered in reactjsStack Overflow