jQuery UI中的iframe div内的droppable div

Question

our problem : I've got a draggable thing outside an iframe, and a droppable target inside it. 我们的问题：我在iframe外部有可拖动的东西，在其内部有可放下的目标。 Here I've shown the iframe as containing a snippet of the HTML that is loaded by its src attribute. 在这里，我已显示iframe包含由src属性加载的HTML片段。

so see code : 所以看代码：

inner iframe page (inner_iframe.html): 内部iframe页面（inner_iframe.html）：

<body style="cursor: auto;">
    <div id="container">
    </div>
</body>

main page : 主页：

<div id="main">
    <iframe id="containeriframe" src="inner_iframe.html"></iframe>
</div>
    <div id="container1">
        <div class="drag" style="left: 20px;" id="lable"></div>
    </div>

JavaScript code : JavaScript代码：

 $("#containeriframe").load(function () {
          var $this = $(this);
          var contents = $this.contents();
          // here, catch the droppable div and create a droppable widget
          contents.find('#container').droppable({
              iframeFix: true,
              drop: function (event, ui) { alert('dropped'); }
          });
      });


$( "#lable" ).draggable({
        revert: "invalid", 
        helper: "clone",
        cursor: "move",
        iframeFix: true
    });

now i use Jquery 1.8 and Jquery UI. 现在我使用Jquery 1.8和Jquery UI。

so i load page and try to drop in iframe div but no respond , so how to manage it. 所以我加载页面并尝试放入iframe div但没有响应，因此如何进行管理。

please help me .... 请帮我 ....

Thanks 谢谢

Answer 1

This works for me: 这对我有用：

Main page: 主页：

<!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.8.0/jquery.min.js""></script>
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
    <script>
        $(function () {

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

            $('#drag').draggable();


        });
    </script>
</head>
<body>

    <iframe src="iframe.html"></iframe>

    <div  style="width:20px; height:20px; background-color: #808080" id="drag"></div>

</body>
</html>

iframe: IFRAME：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

    <div id="iframe_container" style=" width: 40px; height: 40px; background-color: #0094ff">
    </div>


</body>
</html>

Answer 2

Try this plugin http://maxazan.github.io/jquery-ui-droppable-iframe/ 试试这个插件http://maxazan.github.io/jquery-ui-droppable-iframe/

<!--jquery -->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<!--jquery UI -->
<script type="text/javascript" src="js/jquery-ui-1.11.4.custom.js"></script>
<!-- jquery-ui-droppable-iframe -->
<script type="text/javascript" src="jquery-ui-droppable-iframe.js"></script>    
<!--Activate drag and drop zones -->
<script type="text/javascript">
$(function() {
    //After frame loaded
    $("#testframe").load(function() {
        //Activate droppable zones
        $(this).contents().find('.droppable').droppable({
            drop: function(event, ui) {
                //ACTION ON DROP HERE
            }
        });
    });

    //Activate draggable zones
    $('.draggable').draggable({
        iframeFix: true,    //Core jquery ui params needs for fix iframe bug
        iframeScroll: true  //This param needs for activate iframeScroll
    });

});
</script>

jQuery UI中的iframe div内的droppable div

问题描述

2 个解决方案

解决方案1
4 2012-08-29 05:18:30

解决方案2
1 2015-11-14 11:29:38

jQuery UI中的iframe div内的droppable div

问题描述

2 个解决方案

解决方案1 4 2012-08-29 05:18:30

解决方案2 1 2015-11-14 11:29:38

解决方案1
4 2012-08-29 05:18:30

解决方案2
1 2015-11-14 11:29:38