如何在跨域上使用可拖动 (html5 attr) 与 iframe 页面



我的父页面包含跨域上的 iframe 页面,我正在尝试使用可拖动将项目从父级拖动到 iframe。

但是,它无法识别"下降"区域。我在同一域上使用 iframe 做同样的事情,它有效!

/*Check my codes as follow:*/
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>localhost:2000/parent.html</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
#iframe{width:100%;height:450px;}
</style>
</head>
<body>
<ul class="item-list" id="items">
<li draggable="true">1</li>
<li draggable="true">2</li>
<li draggable="true">3</li>
<li draggable="true">4</li>
<li draggable="true">5</li>
<li draggable="true">6</li>
</ul>
<iframe src="localhost:3000/iframe.html" id="iframe"></iframe>
</body>
</html>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="trash">Here is trash.</div>
<script>
$(function(){
$("#trash").on("dragover",function(ev){
ev.preventDefault();
}).on("drop",function(ev){
alert("drop!")
});
});
</script>
</body>
</html>

最新更新