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

悍马

好吧,我修复了代码,我做了两件事更改:

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

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

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

我要感谢rfornal帮助我解决这个问题。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

Related 相关文章

热门标签

归档