JQuery 可拖动到 iframe 之外。可放置在 iframe 内

Posted

技术标签:

【中文标题】JQuery 可拖动到 iframe 之外。可放置在 iframe 内【英文标题】:JQuery draggable outside iframe. Droppable inside iframe 【发布时间】:2012-01-10 03:26:07 【问题描述】:

我有一个可在 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');
    
);

【问题讨论】:

你能给我们看一些代码吗? 我也有同样的问题!有解决方案的线索吗? 似乎 iframe 上的定位工作的奇怪方式使这变得复杂,它在 iframe 上方执行此操作的原因是因为它从屏幕左上角而不是 iframe 左右进行定位我假设。 顺便说一下,你的 iframe 应该是 &lt;iframe&gt;&lt;/iframe&gt; 因为它不是一个自结束标签 【参考方案1】:

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

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);
    );

【讨论】:

以上是关于JQuery 可拖动到 iframe 之外。可放置在 iframe 内的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 可拖动,放置在父 div 之外时的事件

jquery ui可拖动可排序元素到iframe中

jQuery拖放 - 检查droppable之外的拖放

如何决定是接受还是拒绝 jQuery 可拖动到可放置对象

为啥我的 Jquery 可拖动对象放置在三个可拖放对象之一上时会跳转?

如何使用 jQuery 将可拖动项目居中放置在可放置的图像地图区域上?