› ›

Drop Event. Exercise.

DDv2FFDDv2FF
edited March 2018 in p5.js Programming Questions

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>
Tagged:

Best Answer

Answers

Sign In or Register to comment.