1. 首頁
  2. 問答
  3. 在iframe div裏jquery UI中droppable div

在iframe div裏jquery UI中droppable div

2012-08-28 82 views
2

我們的問題： 我在iframe外面有一個可拖動的東西，並且裏面有一個droppable目標。在這裏，我已經展示了iframe，其中包含由其src屬性加載的HTML代碼片段。在iframe div裏jquery UI中droppable div

故見代碼：

內的iframe頁（inner_iframe.html）：

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

主頁：

<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代碼：

$("#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 
    });

現在我使用Jquery 1.8和JQuery UI。

所以我加載頁面，並嘗試放入iframe的div但沒有迴應，所以如何管理它。

請幫我....

感謝

來源

2012-08-28 kamlesh0606

回答

4

這個工作對我來說：

主頁：

<!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：

<!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>

來源

2012-08-29 05:18:30 kmb64

+0

但在iframe中使用此CSS。 css：left：300px;位置：相對;然後製作像::「