i have 3 buttons and i wanna see a message when i drag or click or end drag them but I'm so confused with the firing of the events.
let me show you an example :
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() is the inbuilt of javascript's button object. for that function click(event) not working. need change Function name.
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>The click() function on the ondragstart event is not firing because there's already a click() method on the DOM element corresponding to <p>.
Change the name of the function to something else (e.g. startDragging()) to make it work.
Learn more here: