IE11中的dataTransfer无法正常工作

Question

I have noticed is that my code gives different output between browser versions. Oddly using this with IE11 returns the path to the image and with chrome it returens the element ID. My question is, how do I need to alter my code for it to work?

   <script>
    $(document).ready(function(){
            $("#test1, #test2, #test3").click(function testfunc(event) {
                var testvar = event.target.tagName;
                var testvarr = $(this).attr('id');
                var testvarrr = $(testvar + "#" + testvarr).attr("src");
                var target = $(event.target);
                alert(testvar);
                alert(testvarr);
                alert(testvarrr);// debug I will use this later for a overlay in the same window
            });
        })
        function allowDrop(ev) {
            ev.preventDefault();
        }
        function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.id); // this is different between browsers 
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");
            var array = ["#een", "#twee", "#drie"];

            for(i = 0; i < array.length; i++) {
                if($(array[i]).children().length < 1 && $(ev.target).attr('id') == array[i].replace("#", "")) {
                        if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {
                            alert("hi you use IE");
                            alert(data);// returns the location of the image
                            document.getElementById(array[i].replace("#", "")).appendChild(document.getElementById(data));
                        }else{ 
                            document.getElementById(array[i].replace("#", "")).appendChild(document.getElementById(data));
                            alert("hello");
                            alert(data); // returns the ID of the element
                        }
                    return;
                }
            }
        }
    </script>
    <div class="midden">
        <div id="een" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <div id="twee" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <div id="drie" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </div>
    <p id="demo"></p>
    <img id="test1" draggable="true" ondragstart="drag(event)" onclick="function testfunc(event)" src="ster.gif" width="118" height="69">
    <a href="ster.gif" target="_blank"><img id="test2" draggable="true" ondragstart="drag(event)" onclick="function testfunc(event)" src="ster.gif" width="118" height="69"></a><br>
    <a href="ster.gif" target="_blank"><img id="test3" draggable="true" ondragstart="drag(event)" onclick="function testfunc(event)" src="ster.gif" width="118" height="69"></a>

  $(document).ready(function() { $("#test1, #test2, #test3").click(function testfunc(event) { var testvar = event.target.tagName; var testvarr = $(this).attr('id'); var testvarrr = $(testvar + "#" + testvarr).attr("src"); var target = $(event.target); alert(testvar); alert(testvarr); alert(testvarrr); // debug I will use this later for a overlay in the same window }); }) function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); // this is different between browsers } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); var array = ["#een", "#twee", "#drie"]; for (i = 0; i < array.length; i++) { if ($(array[i]).children().length < 1 && $(ev.target).attr('id') == array[i].replace("#", "")) { if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) { alert("hi you use IE"); alert(data); // returns the location of the image document.getElementById(array[i].replace("#", "")).appendChild(document.getElementById(data)); } else { document.getElementById(array[i].replace("#", "")).appendChild(document.getElementById(data)); alert("hello"); alert(data); // returns the ID of the element } return; } } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <div class="midden"> <div id="een" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="twee" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="drie" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </div> <p id="demo"></p> <img id="test1" draggable="true" ondragstart="drag(event)" onclick="function testfunc(event)" src="ster.gif" width="118" height="69"> <a href="ster.gif" target="_blank"> <img id="test2" draggable="true" ondragstart="drag(event)" onclick="function testfunc(event)" src="ster.gif" width="118" height="69"> </a> <br> <a href="ster.gif" target="_blank"> <img id="test3" draggable="true" ondragstart="drag(event)" onclick="function testfunc(event)" src="ster.gif" width="118" height="69"> </a> 

Update:

Okay I fixed the code there were two things that I changed:

-changed target to srcElement.
-removed the a tags(parents of images)

The a tag was removed because it changed the outcome of the data variable.(this wasn't a problem with chrome) So overall it seems that it might have been a problem with browser compatibility.

Code that I changed from: ev.dataTransfer.setData("text", ev.srcElement.id); to: ev.dataTransfer.setData("text", ev.target.id);

Answer 1

Okay I fixed the code there were two things that I changed:

-changed target to srcElement.
-removed the a tags(parents of images)

The a tag was removed because it changed the outcome of the data variable.(this wasn't a problem with chrome) So overall it seems that it might have been a problem with browser compatibility.

Code that I changed from: ev.dataTransfer.setData("text", ev.srcElement.id); to: ev.dataTransfer.setData("text", ev.target.id);

I want to thank rfornal for helping me with this question.