Question

我有一个iframe显示＆＃34; iframetarget.html＆＃34; （现在只是一个空白的红色页面用于测试目的）。我希望能够调整它的大小，以及无限制地拖动它。我使用JQuery使其可调整大小，这很有效。然后，我添加了.draggable，它无法工作。你能看出我做错了吗？

<!DOCTYPE html>
<html lang="en">
<html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<style>
  #iframe {
  width: 100%;
  height: 100%;
  border: none;    
  background: #eee ;
  z-index: 1;
}
  #resizable {
  width: 100px;
  height: 100px;
  background: #fff;
  border: 1px solid #ccc;
  z-index: 9;
}
</style>

<script>
  $(function() {
    $('#resizable').resizable({
      start: function(event, ui) {
        $('iframe').css('pointer-events','none');
         },
    stop: function(event, ui) {
        $('iframe').css('pointer-events','auto');
      }
  });
  });
</script>

<script>
  $(function() {
    $('#resizable').draggable();
  });
</script>

</head>
<body>

<div id="resizable">
  <iframe src="iframetarget.html" id="iframe">
</div>

</body>

Answer 1

我猜测点击是转到iframe中的页面，而不是被div抓住。可调整大小自动添加句柄，以便它起作用的原因。您可以为拖动器添加手柄或只是放置边框。出于测试目的，如果您将css更改为：

，您将看到实际代码有效

#iframe {
  width: 100%;
  height: 100%;
  border: solid 10px black;    
  background: #eee ;
  z-index: 1;
}

然后点击边框，然后拖动。

或者你添加一个小句柄作为句柄： http://api.jqueryui.com/draggable/#option-handle

Answer 2

我有一个熟悉的问题，用jQueryUi拖动iFrames（我使用了一个对话框，只能用标题栏拖动它）。我的解决方案是使用ajax。尝试“包括另一页”的其他方式：

function loadiframe(){

  var xmlhttp;
  if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
  }else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("resizable").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","iframetarget.html",true);
  xmlhttp.send();
}

如果您运行loadiframe();，iframetarget的内容将加载到#resizable元素。小心在两个页面中使用HTML，CSS和JavaScript，iFrame只显示您的其中一个页面，但这将获得iframetarget.html的源代码并将其添加到div中。 iframetarget文件中不需要HTML声明，html - ，head - 和body - 标记。

IFrame可调整大小，但不能使用JQuery拖拽

2 个答案: