use*_*827 6 html5 drag-and-drop
我知道如何使用html5在一个窗口中拖放.但是如何跨框架拖放?这是我的脚本,可以在一个窗口中工作.有人能帮我吗?
<script>
var drag = document.getElementById("drag");
var drop = document.getElementById("drop");
drag.onselectstart = function () {
return false;
}
drag.ondragstart = function (ev) {
ev.dataTransfer.effectAllowed = "move";
ev.dataTransfer.setData("text", ev.target.innerHTML);
}
drag.ondragend = function (ev) {
var text = ev.dataTransfer.getData("text");
alert(text);
ev.dataTransfer.clearData("text");
return false;
}
drop.ondragover = function (ev) {
ev.preventDefault();
return true;
}
drop.ondragenter = function (ev) {
this.background = "#ffffff";
return true;
}
drop.ondrop = function (ev) {
}
</script>
Run Code Online (Sandbox Code Playgroud)
@Nickolay:哦,好的.
http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/上有一个例子.
添加:
我不确定为什么OP的代码不起作用 - 也许它没有加载到两个帧中?我稍微修改了他们的Javascript以提供更多指示:
window.onload = function () {
var drag = document.getElementById('drag');
var drop = document.getElementById("drop");
if (drag) {
drag.style.backgroundColor = '#00ff00';
drag.onselectstart = function () {
return false;
}
drag.ondragstart = function (ev) {
ev.dataTransfer.effectAllowed = "move";
ev.dataTransfer.setData("text", ev.target.innerHTML);
}
drag.ondragend = function (ev) {
var text = ev.dataTransfer.getData("text");
alert(text);
//ev.dataTransfer.clearData("text");
return false;
}
}
if (drop != null) {
drop.style.backgroundColor = '#0000ff';
drop.ondragover = function (ev) {
ev.preventDefault();
return false;
}
drop.ondragenter = function (ev) {
this.style.backgroundColor = "#ff0000";
return false;
}
drop.ondrop = function (ev) {
return false;
}
}
}
Run Code Online (Sandbox Code Playgroud)
它适用于iframe和浏览器窗口之间(仅在Windows 7 x64上的Firefox 11和IE9中测试).