IFrame Resizable, but not Draggable with JQuery
Question
I have an iframe displaying "iframetarget.html" (for now just a blank red page for testing purposes). I want to be able to resize it, as well as drag it around without constraint. I used JQuery to make it resizable, and this worked. Then, I added .draggable, and it fails to work. Can you see what I'm doing wrong?
<!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 answers
solution1
0 ACCPTED 2015-05-22 16:03:28
I'm guessing the click is going to the page in the iframe instead of being caught by your div. Resizable automatically add handles so that's why it works. You can add a handle to your draggable or simply put a border. For testing purpose, you'll see that your actual code works if you change your css to:
#iframe {
width: 100%;
height: 100%;
border: solid 10px black;
background: #eee ;
z-index: 1;
}
Then click on the border and it'll drag.
Or you add a small div that works as a handle: http://api.jqueryui.com/draggable/#option-handle
solution2
0 2015-05-22 16:08:03
I had a familiar problem, dragging iFrames with jQueryUi (I've used a dialog and it was only possible to drag it holding the title bar). My solution was using ajax. Try that other way of "including another page":
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();
}
If you run loadiframe(); the content of iframetarget will be load to the #resizable element. Be careful using HTML, CSS and JavaScript in both pages, an iFrame just displays the other page in your one, but this will get the source code of iframetarget.html an add it into the div. You won't need HTML-declaration, html -, head - and body -tags in the iframetarget-file.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.