How to capture the click plus drag event

Question

I want to capture the click plus drag event like browser text selection, what I did is calling the ondrag event:

 function drag() { console.log("being dragged."); } 

 <p ondrag="drag()" > Hello World!</p> 

But it's not being called when I click and drag text, any idea why?

Answer 1

It seems you don't actually want to use drag events, and that you want to use mousemove events. Something like this will do the trick:

 var p = document.querySelector('p'); p.addEventListener('mousedown', mouseDownListener, true); window.addEventListener('mouseup', mouseUpListener, true); function mouseMoveListener(e) { console.log('moving mouse'); } function mouseDownListener(e) { console.log('mouse down'); window.addEventListener('mousemove', mouseMoveListener, true); } function mouseUpListener(e) { console.log('mouse up'); window.removeEventListener('mousemove', mouseMoveListener, true); } 

 <p>Hello World!</p> 

Answer 2

Add draggable= "true" attribute to p tag to make it work

check this link for more details - https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable

  function drag() { console.log("being dragged."); } 

  <p ondrag="drag()" draggable="true"> Hello World!</p> 

codepen for reference - https://codepen.io/nagasai/pen/KGZoRm