IE11中的dataTransfer無法正常工作

Question

我注意到，我的代碼在瀏覽器版本之間給出了不同的輸出。 奇怪的是，將其與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);

Answer 1

好吧，我修復了代碼，我做了兩件事更改：

-將目標更改為srcElement。
-刪除了a標簽（圖片的父母）

刪除了一個標簽，因為它更改了數據變量的結果。（這不是chrome的問題）因此，總體看來，這可能與瀏覽器兼容性有關。

我更改后的代碼： ev.dataTransfer.setData("text", ev.srcElement.id); 到： ev.dataTransfer.setData("text", ev.target.id);

我要感謝rfornal幫助我解決這個問題。