Javascript - drag and drop in Internet Explorer and Edge don't work

Question

I have drag and drop code that works normally in Chrome and Firefox but it won't work in Internet Explorer 11 and Edge.

This is simplified example of moving nodes in treeview. You drag one node (li element) and put it on another (also li element). So when you drop element to another, it shows alert what is moved on what. And that works in Chrome anf FF but don't work in IE and Edge. Anyone knows why? It seems that IE and Edge handles Drag and Drop differently than other browsers, but I can not figure out what to change.

Here is code (whole page):

<!DOCTYPE html>
<html>

    <head>
        <title>DD Test</title>

        <!-- jQuery -->
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>

    <body>
        <ul>
            <li draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">Coffee</li>
            <li draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">Tea</li>
            <li draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">Milk</li>
        </ul>     
    </body>

</html>


<script>
    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.stopPropagation();
        var object = $(ev.target);
        var objectname = object.html();
        ev.dataTransfer.setData("objectname", objectname);
    }

    function drop(ev) {
        ev.preventDefault();
        ev.stopPropagation();
        var target = $(ev.target);
        var targetname = target.html();
        var objectname = ev.dataTransfer.getData("objectname");
        alert(objectname + " on " + targetname);
    }
</script>

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

function drag(ev) {
  ev.stopPropagation();
  var object = $(ev.target);
  var objectname = object.html();
  ev.dataTransfer.setData("objectname", objectname);
}

function drop(ev) {
  ev.preventDefault();
  ev.stopPropagation();
  var target = $(ev.target);
  var targetname = target.html();
  var objectname = ev.dataTransfer.getData("objectname");
  alert(objectname + " on " + targetname);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">Coffee</li>
  <li draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">Tea</li>
  <li draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">Milk</li>
</ul>

This is simplified example of moving nodes in treeview. You drag one node (
Perhaps you need to get the event from window.event: http://stackoverflow.com/questions/1000597/event-preventdefault-function-not-working-in-ie — mplungjan, May 22 '16 at 16:21
Nope. I changed code as suggested on that topic but still dont work. — SaleCar, May 22 '16 at 16:29

Random Channel · Answer 1 · 2016-05-22T14:47:08.693

0

Try this:

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

    function drag(e) {
        e.stopPropagation();
        var object = $(e.target);
        var objectname = object.html();
        e.dataTransfer.setData("objectname", objectname);
    }

    function drop(e) {
        e.preventDefault();
        e.stopPropagation();
        var target = $(e.target);
        var targetname = target.html();
        var objectname = e.dataTransfer.getData("objectname");
        alert(objectname + " on " + targetname);
    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js">    </script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js">    </script>
<ul>
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ul>

edited May 22 '16 at 14:47

answered May 22 '16 at 14:32

Random Channel

1,134
10
22

I don't want to reorder. I just want to drag node and on drop to get information what is dragged and on what is dropped. Or, simply, answer why my code above works on Chrome and FF and not on IE and Edge? – SaleCar May 22 '16 at 14:36
I changed all of the ev's to e's – Random Channel May 22 '16 at 14:48
Everything is the same. Works on Chrome and FF but not in IE and Edge :( – SaleCar May 22 '16 at 14:53
then im not sure it is possible – Random Channel May 22 '16 at 14:55

Javascript - drag and drop in Internet Explorer and Edge don't work

1 Answers1