How to detect the div where we in using javascript drag and drop

Question

this is my javascript code `

function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("Text",ev.target.id);
        ev.dataTransfer.setData("class",ev.target.classList);
    }

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
        var classs = ev.dataTransfer.getData("class");
        if(data === "body") {
            document.getElementById('div1').className = '';
            document.getElementById('div1').classList.add(classs);
        }
        if(data === "table"){
            document.getElementById('myTable').className = '';
            document.getElementById('myTable').classList.add(classs);
        }
        if(data === "font"){
            document.getElementById('myTable').classList.add(classs);
        }
    }`

as you can see i just get div that i code based on id that i set in element that i want drag and drop, how to detect where element are we in on drag and drop so i dont need to use document.getElementById again

Reference `ev.target` inside of `drop`? – CertainPerformance Apr 17 '18 at 02:53 — CertainPerformance, Apr 17 '18 at 02:53

Seircn · Answer 1 · 2018-04-17T03:06:47.760

0

do you mean 'ondragenter' or 'ondrop'?

<div id='div1' ondrop="drop1(event)></div>
<script>
function drop1(event) {
event.preventDefault();
event.target.style.backgroundColor = "lightblue";
}
</script>

edited Apr 17 '18 at 03:06

answered Apr 17 '18 at 02:39

Seircn

36
3

on drop event, so when it's dropped it will detect what element is dropped and add class to it – Eric Anthony Wu Apr 17 '18 at 02:40
well it just same as my code, i don't want to use 'if' conditional but i want it automatically detect the element so i dont need to add div1 etc – Eric Anthony Wu Apr 17 '18 at 02:58

How to detect the div where we in using javascript drag and drop

1 Answers1