Baby items allow you to drag and drop

Question

I am having a strange drag and drop problem in html5.

Panel A has a list of item types that you can drag and drop. Panel B is where the elements are dragged. Panel C and D are other places where you can drag and drop items, and you can drag and rearrange items between panels B, C, and D.

My problem is that I can drag an element and drop it INSIDE of another element that is inside one of the panels, which I do not want the user to be able to do. The children of these panels do not have any javascript or drag and drop properties associated with them, but they currently allow you to move elements within them.

I tried setting "ondrop =" return false; "and" ondragover = "return false;", but none of them worked.

Of course, is there a way to disable the "allow dragging into" property in an element?

Here is my code:

<div id="elem-002" draggable="true" ondragstart="drag(event)">content</div>

The main panel:

<div id="panel-b" ondrop="drop(event)" ondragover="allowDrop(event)">
  <div id="elem-001" draggable="true" ondragstart="drag(event)">content</div>
</div>

JS:

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

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

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

He said another way: I can drag my "elem-002" directly into the element "elem-001", which has already been dragged. This causes an attachment of elements that I do not want to have. How can I prevent this?

Answer 1

, ev.dataTransfer.dropEffect allowDrop. draggable "none" ( ), ( , ) - "all"

dropEffect

:

window.allowDrop = function(ev) {
    ev.preventDefault();
    if (ev.target.getAttribute("draggable") == "true")
        ev.dataTransfer.dropEffect = "none"; // dropping is not allowed
    else
        ev.dataTransfer.dropEffect = "all"; // drop it like it hot
};

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

window.drop = function(ev) {
    ev.preventDefault();
    var id = ev.dataTransfer.getData("id");

    var dragged = document.getElementById(id);
    ev.target.appendChild(dragged);
    dragged.className += " dropped";
};

.drag {
    display: inline-block;
    padding: 5px;
    background: rgba(0, 0, 0, 0.2);
    margin: 2px;
}

.dropzone {
    background: #ccc;
    padding: 5px;
    margin-top: 10px;
}

<div id="first" class="drag" draggable="true" ondragstart="drag(event)">1</div>
<div id="second" class="drag" draggable="true" ondragstart="drag(event)">2</div>

<div class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"><div id="third" class="drag dropped" draggable="true" ondragstart="drag(event)">3</div></div>

Hide result

Answer 2

, , - .

drop (ev) :

function drop(ev) {
    ev.preventDefault();

    if (!ev.target.getAttribute("ondrop"))
        return false;

    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

, - , "ondrop".

Answer 3

, [down | move | ] , drag [enter | over | leave] . Custom Events // drop. , .

Anyhoo, , , . [target | srcElement] , "" . ; , [target | srcElement] 'this' 'this' [target | srcElement] (.. ), ;

// Drop Event Handler
function dropEventHandler(event) {
    event = event || window.event;
    var target = event.target || event.srcElement;

    if (this !== target && this.contains(target)) {
        // Use if not a proper/normal event, this should stop any further 
        //   processing of the event 
        // if (event.stopPropagation) event.stopPropagation();  // Standard model
        // else event.cancelBubble = true;                       //IE

        // Stops the default action of an element from happening
        // Use the event.isDefaultPrevented() method to check whether 
        //   the preventDefault() method was called for the event
        if (event.preventDefault) event.preventDefault();   // Standard model
        else event.returnValue = false;                      //IE

        return false;
    }
    // Process drop event
}

Chrome, FF, Opera, IE Edge && & IE 11 [ 7-11] Windows 10, IE v8.0.7601.17514 Windows 7 [IE7 IE8 Compatibility].

Answer 4

@Zerkeras, - , , , , , .

function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        var i = 0;
        var element = ev.target
        while (!element.getAttribute("ondrop") && i < 3) {
            console.log("recalibrating");
            element = element.parentElement;
            i++;
        }
        element.appendChild(document.getElementById(data));
    }

, 3 while, , . , , .

, element, , ev.target ( , JavaScript, - , , ). , while , .