Tengo 3 botones y quiero ver un mensaje cuando los arrastro, hago clic o termino de arrastrarlos, pero estoy muy confundido con la activación de los eventos.
Dejame mostrarte un ejemplo :
function click(event){ event.preventDefault(); /* lastwordchoosed = ""; isindrag = true; */ //lastwordchoosed += document.getElementById(id).innerHTML; console.log("you started dragging"); } function over(event){ event.preventDefault(); console.log("you go on a button") //lastwordchoosed += document.getElementById(id).innerHTML; debugger; } function up(event){ event.preventDefault(); console.log("you stopped dragging"); //lastwordchoosed += document.getElementById(id).innerHTML debugger; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p draggable="true" id="b1" ondragstart="click(event)" ondragover="over(event)" ondragend="up(event)" style="font-size: 30pt;">a</p> <p draggable="true" id="b2" ondragstart="click(event)" ondragover="over(event)" ondragend="up(event)" style="font-size: 30pt;">z</p> <p draggable="true" id="b3" ondragstart="click(event)" ondragover="over(event)" onmouseup="up(event)" style="font-size: 30pt;">b</p> <p id="demo"></p> </body> <script src="index.js"></script> </html>click() es el objeto de botón incorporado de javascript. para esa function click(event) no funciona. necesita cambiar el nombre de la función.
function click1(event){ event.preventDefault(); /* lastwordchoosed = ""; isindrag = true; */ //lastwordchoosed += document.getElementById(id).innerHTML; console.log("you started dragging"); } function over(event){ event.preventDefault(); console.log("you go on a button") //lastwordchoosed += document.getElementById(id).innerHTML; debugger; } function up(event){ event.preventDefault(); console.log("you stopped dragging"); //lastwordchoosed += document.getElementById(id).innerHTML debugger; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p draggable="true" id="b1" ondragstart="click1(event)" ondragover="over(event)" ondragend="up(event)" style="font-size: 30pt;">a</p> <p draggable="true" id="b2" ondragstart="click1(event)" ondragover="over(event)" ondragend="up(event)" style="font-size: 30pt;">z</p> <p draggable="true" id="b3" ondragstart="click1(event)" ondragover="over(event)" onmouseup="up(event)" style="font-size: 30pt;">b</p>' <p id="demo"></p> </body> <script src="index.js"></script> </html>La función click() en el evento ondragstart no se activa porque ya hay un método click() en el elemento DOM correspondiente a <p> .
Cambie el nombre de la función a otra cosa (por ejemplo startDragging() ) para que funcione.
Aprende más aquí: