Почему не работает dragstart при перемещении картинки? JS

Question

const open = document.getElementById("trashOp"); 
const close = document.getElementById("trashCl");

function trash() {
    for(let i=0; i < 4; i++){
        let div = document.getElementById("trash");
        let img = document.createElement("img");
        img.id = "trash-"+(i+1);
        img.src = "images/trash.jpg";
        img.draggable = "true";
        img.ondrag="onDragStart(event);"
        let left = Math.floor(Math.random()*1200);
        let top = Math.floor(Math.random()*800);
        img.style.position = "fixed";
        img.style.width = "150px";
        img.style.height = "150px";
        img.style.left = left + "px";
        img.style.top = top + "px";
        img.style.cursor = "grab";
        div.appendChild(img);
    }
}

function onDragStart(event) {
    event.dataTransfer.setData("text/plain", event.target.id);
}

function onDragLeave(event){
    open.style.display = "none";
    close.style.display = "block";
}

function onDragOver(event) {
    event.preventDefault();
    open.style.display = "block";
    close.style.display = "none";
}

function onDrop(event) {
    const data = event.dataTransfer.getData("text");
    console.log(data);
    const draggableElemnt = document.getElementById(data);
    draggableElemnt.style.display = "none";
    open.style.display = "none";
    close.style.display = "block";
    event.dataTransfer.clearData();
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game</title>
    <link rel="stylesheet" href="css/Main.css">
</head>
<body onload="trash()">
    <a href="Main.html" style="z-index: 999;"><div>>Вернуться в галерею<</div></a>
    <div class="main" ondragover="onDragOver(event);">
        <div id="trashOp"><img src="images/TrashOpen.jpg" ondrop="onDrop(event);" ondragleave="onDragLeave(event);"></div>
        <div id="trashCl"><img src="images/TrashClose.jpg"></div>
    </div>
    <div id="trash"></div>
    <script src="js/Game.js"></script>
</body>
</html>

#trash{
    position: relative;
}

.main{
    position: fixed;
    right: 25px;
    top:150px;
}

.main #trashCl{
    background: url(../images/TrashClose.jpg) no-repeat;
    display: block;
}

.main #trashOp{
    background: url(../images/TrashOpen.jpg) no-repeat;
    display: none;
}

БЛОГ НА HUSL

Почему не работает dragstart при перемещении картинки? JS

Ответы (0 шт):