Drop Event. Exercise.

Hi, I´ve been learning how to make pages from TheCodingTrain, and in this particular video
https://youtube.com/watch?v=o4UmGrPst_c&index=15&list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX
Showed us how to use Drag/Drop events, and at the end I tried to make the same he did in the video. I have the exactly same code, but mine doesn't work. Without the drop event, the dragg "highlight" and "unhighlight" works perfectly, but when I add the Drop event, it doesnt "hightlight" never again. The drop event works fine I think, because the image is created, but the drag evets doesnt work anymore. In my code the "highlight" and "unhighlight" are the "OverLigh" and "OutLight". Can anyone tell me what im doing wrong ? Thanks

var pa;
function setup() {
    createCanvas(200, 200);
    background(0);
    pa = select("#lol");

    pa.dragOver(LightOn);
    pa.dragLeave(LightOff);
    pa.drop(gotFile, LightOff);
}
function LightOn(){
    pa.style("background-color", "grey");
}

function LightOff(){
    pa.style("background-color", "white");
}


function gotFile(file){
    createP(file.name);
    createImg(file.data);
}

And

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Drop</title>

    <script src="libraries/p5.js"></script>
    <script src="libraries/p5.dom.js"></script>
    <script src="libraries/p5.sound.js"></script>
    <script src="sketch.js"></script>

    <style>
        #lol{
            padding: 30pt;
            border-style: dashed;
            width: 30%;
        }
    </style>
</head>
<body>
<p id = "lol"> Drop your images here </p>
</body>
</html>
Sign In or Register to comment.