在 iframe 中拖放

Nik*_*vic 3 html javascript

我正在尝试制作一个网络应用程序,允许用户在 iframe 元素中拖动 div。

这是我当前在 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>
Run Code Online (Sandbox Code Playgroud)

这是我来自 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>
Run Code Online (Sandbox Code Playgroud)

拖动有效,我什至从 onDrop 函数收到该警报,但event.dataTransfer.getData('Text')返回空字符串,我不知道为什么。

提前致谢

pim*_*vdb 5

您应该在事件中设置拖动数据dragstart,而不是drag事件: http: //jsfiddle.net/SVtzK/1/