我注意到我的代码在浏览器版本之间提供了不同的输出。 奇怪的是,在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标签(图像的父母)
删除了a标签,因为它改变了数据变量的结果。(这不是chrome的问题) 总的来说,似乎它可能是浏览器兼容性的问题。
我改变的代码:
ev.dataTransfer.setData("text", ev.srcElement.id);
:
ev.dataTransfer.setData("text", ev.target.id);
答案 0 :(得分:0)
好的,我修改了代码,我改变了两件事:
- 将目标改为srcElement - 删除了a标签(图像的父母)
删除了a标签,因为它改变了数据变量的结果。(这不是chrome的问题) 总的来说,似乎它可能是浏览器兼容性的问题。
我改变的代码:
ev.dataTransfer.setData("text", ev.srcElement.id);
:
ev.dataTransfer.setData("text", ev.target.id);
我要感谢rfornal帮助我解决这个问题。