ondragstart event not firing and not working

Issue

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>

but the dragstart event doesn’t work and when i start dragging on an element it doesn’t say you started dragging.Why?

Solution

The click() function on 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:

Answered By – codesnerd

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.