CODEWITHSUNDEEP
javascripthtmlcss
Mabero
Mabero

Reputation: 57

JS Drag and Drop: Make a div with specific classname not droppable

Im having some trouble implementing drag and drop to my project. Im making a Kanban tool like trello. I have divs that are "lists" and those lists have other divs inside that are "cards". When functioning ideally I would be able to put cards inside different lists, but not a list inside a list. However with my code right now I'm able to drag a list inside a list.

I would like to know how to find the html class of what I'm dragging, so that I can use that to validate.

So what I want to happen is that I can be able to drag a list, but not drop it inside another. I should however be able to rearrange the lists with cards inside, and move cards to different lists.

Thanks!

This is the Javascript:

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

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    if ( ev.target.className == "list")  {
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
    }
}

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

function drag1(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop1(ev) {
    ev.preventDefault();
    if ( event.target.className == "listWrap" ) {
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
    }
}
´´´´
And this is a list from the html:
```
<div class="listWrap" ondrop="drop1(event)" ondragover="allowDrop1(event)">
                <div class="list" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag1(event)" id=list_1 >

                    <div class="card" id=card_1 draggable="true" ondragstart="drag(event)">
                        <p> test </p>
                    </div>
                    <div class=card id=card_2 draggable="true" ondragstart="drag(event)">
                        <p> test 2 </p>
                    </div>
                </div>
            </div>

Upvotes: 1

Views: 311

Answers (1)

Mabero
Mabero

Reputation: 57

I fixed it! Also added functionality to drag a list inside the list-wrapper of a another list and make them switch places.

Here is the new code:

var dragget;
var source;
var dragged;

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

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id)
    dragget = event.target.className;
    dragged = event.target;
    source = ev.target.parentElement;
}

function drop(ev) {
    ev.preventDefault();
    if ( ev.target.className == "list" && dragget == "card" )  {
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
    }
}

function drop1(ev) {
    ev.preventDefault();
    if ( event.target.className == "listWrap" && dragget == "list" ) {

        var data = ev.dataTransfer.getData("text");
        source.innerHTML = ev.target.innerHTML;
        ev.target.innerHTML = "";
        ev.target.appendChild(dragged);
    }
}

HTML:

<div class="listWrap" ondrop="drop1(event)" ondragover="allowDrop(event)">
                <div class="list" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)" id=list_1 >

                    <div class="card" id=card_1 draggable="true" ondragstart="drag(event)">
                        <p> test </p>
                    </div>
                    <div class=card id=card_2 draggable="true" ondragstart="drag(event)">
                        <p> test 2 </p>
                    </div>
                </div>
            </div>

Upvotes: 1

Related Questions