JQuery 可在 iframe 外部拖动。可放置在 iframe 内

我有一个可拖动到 iframe 之外的 jquery。我需要在 iframe droppables 中制作元素。当我在 iframe 上拖动时，“over”事件不会触发，但如果我继续在 iframe 上方拖动，“over”事件就会触发。

看起来这也发布在这里，但从未回复。 jQuery and iframes and weird positioning: is there a workaround?

编辑:代码示例

html

<div id="draggable"> 
</div> 
 
<iframe id="iframe"/> 

JavaScript

$("#draggable").draggable(); 
 
var body = $('#iframe').contents().find('body'); 
$(body).droppable({ 
    over:function(event,ui) { 
        alert('over droppable'); 
    } 
}); 

请您参考如下方法:

我认为你可以像这样使用代码。

html

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
</head> 
 
<body> 
<div style="width:400px; height:200px; overflow:auto"> 
<iframe src="iframe.html" style="width:400px; height:400px;"></iframe> 
</div> 
<div  style="width:60px; height:60px; background-color: #808080" id="drag"></div> 
</body> 
</html> 

JavaScript

$(function () { 
        $("iframe").load(function () { 
            var iframe = $(this).contents(); 
            iframe.find('#iframe_container').droppable( 
            { 
                iframeFix: true, 
                drop: function (event, ui) { alert('dropped'); } 
            }); 
        }); 
        $('#drag').draggable({iframeFix: true}); 
    });