从一个窗口拖放到另一个窗口

时间:2018-04-10 06:30:03

标签: javascript html drag-and-drop

我一直在研究可以完成的拖放事件,但我似乎无法找到关于在窗口之间拖放的任何内容。

如果我在一个窗口中有框和段落,我可以使它工作,但它不会掉到另一个浏览器。请在下面找到我的代码。

  

DragElement.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#div1 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<p id = "drag1" draggable = "true" ondragstart="drag(event)"> Hello </p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<script>
function drag(ev)
{
    ev.dataTransfer.setData("text", ev.target.id);
}

function allowDrop(ev) 
{
    ev.preventDefault();
}
function drop(ev) 
{
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>
  

Homepage.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#div1 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
</style>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<script>
function allowDrop(ev) 
{
    ev.preventDefault();
}
function drop(ev) 
{
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>

0 个答案:

没有答案