IE11中的dataTransfer无法正常工作

我注意到，我的代码在浏览器版本之间给出了不同的输出。奇怪的是，将其与IE11一起使用可返回图像的路径，而对于chrome，则可返回元素ID。我的问题是，我需要如何更改代码才能使其正常工作？

   <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>

更新：

好吧，我修复了代码，我做了两件事更改：

-将目标更改为srcElement。
-删除了a标签（图片的父母）

删除了一个标签，因为它更改了数据变量的结果。（这不是chrome的问题）因此，总体看来，这可能是浏览器兼容性方面的问题。

我将代码从：更改ev.dataTransfer.setData("text", ev.srcElement.id);为：ev.dataTransfer.setData("text", ev.target.id);