Drag to Target with JavaScript

Question

I have a list of senators with names and parties, such that

<senators>
<senator>
<name>Chuck Schumer</name>
<party>Democrat</party>
<vote>false</vote>
</senator>
<senator>
<name>Dick Durbin</name>
<party>Democrat</party>
<vote>false</vote>
</senator>

and I want to drag them to 1 of two boxes, one of which matches the party and one of which does not. I haven't got to the part where I determine whether an item can be dropped in a given target because I can't get them to land in ANY target. bit of a problem.

I might be losing track of my variables, here, but I'm using a lot of console to try to see what's going on, and it makes no sense to me why this isn't working.

 members = document.getElementById("members");
    republicans = document.getElementById("republicans");
    democrats = document.getElementById("democrats");
    msg = document.getElementById("msg");

    // Add event handlers for the sauce
    members.ondragstart = dragStartHandler;
    members.ondragend = dragEndHandler;
    members.ondrag = dragHandler;

    // Add event handlers for the target
    democrats.ondragenter = dragEnterHandler;
    democrats.ondragover = dragOverHandler;
    democrats.ondrop = dropHandler;

    republicans.ondragenter = dragEnterHandler;
    republicans.ondragover = dragOverHandler;
    republicans.ondrop = dropHandler;


function dragStartHandler(e) {
    e.dataTransfer.setData("Text", e.target.id);
    sourceId = e.target.id;     // explicitly for some browsers
    e.target.classList.add("dragged");
}

function dragEndHandler(e) {
    msg.innerHTML = "Drag ended";
    var elems = document.querySelectorAll(".dragged");
    for(var i = 0; i < elems.length; i++) {
        elems[i].classList.remove("dragged");
    }
}

function dragHandler(e) {
    msg.innerHTML = "Dragging " + sourceId;
}

function dragEnterHandler(e) {
    console.log("Drag Entering " + e.target.id + 
            " source is " + e.dataTransfer.getData("Text") );

    var id = e.dataTransfer.getData("Text") || sourceId;
    if (id == "democrat") {
        e.preventDefault();
    }
}

function dragOverHandler(e) {
    console.log("Drag Over " + e.target.id + 
             " source is " + e.dataTransfer.getData("Text")) ;

    var id = e.dataTransfer.getData("Text") || sourceId;
    if (id == "democrat") {
        e.preventDefault();
    }
}

function dropHandler(e) {
    console.log("Drop on " + e.target.id + 
             " source is " + e.dataTransfer.getData("Text")) ;

    var id = e.dataTransfer.getData("Text") || sourceId;
    var sourceElement = document.getElementById(id);
    var newElement = sourceElement.cloneNode(false);               
    target.innerHTML = "";
    target.appendChild(newElement);
    e.preventDefault();}

nice article, I followed a similar process to get here, but it doesn't help me after hours of head to wall impacts. — Andrew Steier, Sep 17 '19 at 08:24
I haven't looked at your code, but having done this kind of drag and drop stuff myself, I know that stepping through this kind of thing almost always is a pain because the events occur once per pixel moved unless you put some sort of threshold or minimum number of pixels that have to be moved before the event can 'fire' again. It's just a pain, and the events get lost so the drag often fails. The best way to implement drag-and-drops is to use a good plug-in. I have used jQuery-UI: https://jqueryui.com/draggable/, which has several good examples. — , Sep 17 '19 at 08:25
Then create a minimal reproducible example... https://stackoverflow.com/help/minimal-reproducible-example — David Lemon, Sep 17 '19 at 08:25

score 0 · Answer 1 · edited Sep 17 '19 at 09:59

0

Jquery UI provides draggable() and droppable() to drag various DOM elements.

You can check the below links that clearly explain its working.

https://www.geeksforgeeks.org/jquery-ui-draggable-and-droppable-methods/ https://codepen.io/salasks/pen/ojzvp

edited Sep 17 '19 at 09:59

Draken

3,134
13
34
54

answered Sep 17 '19 at 08:30

Jayshree Rathod

77
6

Drag to Target with JavaScript

1 Answers1