我正在尝试制作允许用户在 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>
这是我在 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.dataTransfer.getData('Text') 返回空字符串，我不知道为什么。
提前致谢
最佳答案
您应该在 dragstart 事件中设置拖动数据，而不是 drag 事件:http://jsfiddle.net/SVtzK/1/ .
关于javascript - 在 iframe 中拖放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14547937/