javascript - Drag and Drop in iframe - Stack Overflow|江阴雨辰互联

I'm trying to make web app that will allow user to drag div's in iframe element.

This is my current code in index.html :

<script type="text/javascript" src=".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>

And here is my code from 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>

Drag works, and I even get that alert from onDrop function, but the event.dataTransfer.getData('Text') is returning empty string, and I don't know why.

Thanks in advance

I'm trying to make web app that will allow user to drag div's in iframe element.

This is my current code in index.html :

<script type="text/javascript" src="http://code.jquery./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>

And here is my code from 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>

Drag works, and I even get that alert from onDrop function, but the event.dataTransfer.getData('Text') is returning empty string, and I don't know why.

Thanks in advance

Share Improve this question edited Jan 27, 2013 at 14:02 asked Jan 27, 2013 at 13:39 Nikola Ninkovic 1,2622 gold badges12 silver badges27 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

You should set drag data in the dragstart event, not the drag event: http://jsfiddle/SVtzK/1/.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742327692a4423079.html

javascript - Drag and Drop in iframe - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Drag and Drop in iframe - Stack Overflow

1 Answer 1

相关推荐