Javascript 在iframe中拖放_Javascript_Html

Javascript 在iframe中拖放

javascript html

Javascript 在iframe中拖放,javascript,html,Javascript,Html,我正在尝试制作一个允许用户在iframe元素中拖动div的web应用程序这是我在index.html中的当前代码： <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script> function onDrag(event){ event.dataTransfer.setData('Text', 'Some con

我正在尝试制作一个允许用户在iframe元素中拖动div的web应用程序

这是我在index.html中的当前代码：

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
    function onDrag(event){
        event.dataTransfer.setData('Text', 'Some content');
    }
</script>
<div id="items">
    <ul>
        <li><div draggable="true" ondrag="onDrag(event)">Content1</div></li>
        <li><div draggable="true" ondrag="onDrag(event)">Content2</div></li>
    </ul>
</div>
<iframe id="box" src="box.html">
</iframe>


onDrag功能（事件）{
event.dataTransfer.setData（'Text'，'Some content'）；
}

内容1
内容2

下面是我在box.html中的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>    
        function onDrop(event){
            event.target.innerHTML += event.dataTransfer.getData('Text');
            alert('Ok!');
        }
        function onDragOver(ev){
            ev.preventDefault();
        }
    </script>
</head>
<body ondragover="onDragOver(event)" ondrop="onDrop(event)">
</body>
</html>


onDrop功能（事件）{
event.target.innerHTML+=event.dataTransfer.getData（'Text'）；
警报（'Ok！'）；
}
奥德拉戈弗功能（ev）{
ev.preventDefault（）；
}

拖动是有效的，我甚至从onDrop函数中得到了警报，但是

event.dataTransfer.getData（'Text'）

返回空字符串，我不知道为什么

提前感谢

您应该在

dragstart

事件中设置拖动数据，而不是

拖动

事件：。

您将在我的新项目中获得贡品：）