可調整大小的IFrame，但不能與JQuery一起拖動
[英]IFrame Resizable, but not Draggable with JQuery
問題描述
我有一個顯示“ iframetarget.html”的iframe（目前僅用於測試目的是一個空白的紅色頁面）。 我希望能夠調整它的大小，以及無限制地拖動它。 我使用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>
2 個解決方案
解決方案1
0 已采納 2015-05-22 16:03:28
我猜想點擊將轉到iframe中的頁面，而不是被您的div捕獲。 可調整大小的控件會自動添加句柄，因此起作用。 您可以向可拖動對象添加手柄，也可以簡單地放置邊框。 出於測試目的，如果將CSS更改為：
#iframe {
width: 100%;
height: 100%;
border: solid 10px black;
background: #eee ;
z-index: 1;
}
然后單擊邊框，它將拖動。
或添加一個用作句柄的小div： http : //api.jqueryui.com/draggable/#option-handle
解決方案2
0 2015-05-22 16:08:03
我遇到了一個熟悉的問題，即使用jQueryUi拖動iFrame（我使用了一個對話框，只能拖動它並保持標題欄）。 我的解決方案是使用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的源代碼iframetarget.html其添加到div中。 您不需要HTML聲明， html - ， - head -和body在iframetarget文件標簽都有效。
可拖動，可調整大小和可移動的iframe
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.