Quiero capturar el evento de clic más arrastrar como la selección de texto del navegador, lo que hice fue llamar al evento ondrag:

function drag() {
  console.log("being dragged.");
}
<p ondrag="drag()" > Hello World!</p>

Pero no se llama cuando hago clic y arrastro texto, ¿alguna idea de por qué?

0
typeof programmer 16 oct. 2018 a las 18:34

2 respuestas

La mejor respuesta

Parece que en realidad no desea usar eventos de arrastre y que desea usar eventos mousemove. Algo como esto hará el truco:

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>
1
Darren 16 oct. 2018 a las 16:35

Agregue el atributo draggable = "true" a la etiqueta p para que funcione

Consulte este enlace para obtener más detalles: 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 para referencia - https://codepen.io/nagasai/pen/KGZoRm

0
Naga Sai A 16 oct. 2018 a las 15:43