jQuery Draggable IFrameFix
13,753
Solution 1
Solved it.
I created my own overlay over my iframe and when I start dragging I display it and hide it when I stop. This way the iframe doensn't mess with the dragging.
Solution 2
Yes, you can put a div over the iframe, i use this function:
div.draggable{
cancel: '.noDraggable',
scroll: false,
appendTo: 'body',
zIndex: 9999,
cursor: "move",
distance: 10,
iframeFix: true,
start: function(){
var iframe = $(this).find("iframe");
if(iframe.length > 0){
div(iframe.parent(), "img/blank.gif", "transparent");
}
},
stop: function(){
$(this).find(".capaCargando").remove();
}
});
And this is the function
function capaCargando(div, img, color){
if(div.length > 0){
//div.find('.capaCargando').remove();
//aLaConsola(div.find('.capaCargando').length);
if(img == undefined){
img = 'img/uispoty/loadBusqueda.gif';
}
if(color == undefined){
color = '#666';
}
var w = div.width(),
h = div.height(),
html = "<div class='capaCargando'>"+
"<div class='bgCapaCargando' style='background-color:"+color+"'></div>"+
"<div class='iconoCapaCargando' style='background-image:url("+img+")'></div>"+
"</div>";
div.prepend(html);
var capa = div.find(".capaCargando");
capa.find(".bgCapaCargando, .iconoCapaCargando").width(w).height(h);
}
}
You need study this code because i use this for my project, with clases and other things, but sure you understand the concept.
Related videos on Youtube
Author by
jeroenjoosen
Updated on June 04, 2022Comments
-
jeroenjoosen over 1 year
I have a little problem with the jQuery Draggable IFrameFix. I have a container (as shown below) with an iframe inside of it. I turned on the iframeFix in my draggable setup, but it doesn't change a thing. Anyone who had the same problem or anyone who might know how to solve this?
<div class="container"> <div class="toolbar"> <div class="opt1"></div> <div class="opt2"></div> </div> <iframe src="url" class="frame" frameborder="0" scrolling="no"><p>No support for iframes</p></iframe> </div>
This if my javascript code.
$(".container").draggable({ snap: ".snapper_col", containment: "#element_container", handle: '.opt1', snapTolerance: 20, iframeFix: true, cursor: "crosshair", start: function(ev,ui){ }, drag: function(ev,ui){ }, stop: function(ev, ui){ } });
Thanks!
-
Lea Hayes over 12 yearsthank you so much for sharing that tip. I am using jQuery UI dialog with IFRAME and it was causing endless problems.
-
Erik Dekker over 11 yearsDoing the same now. It was also reported as a bug here: bugs.jqueryui.com/ticket/7650
-
Tony Dinh almost 10 yearsThank you so much, save my day, sir!
-
im_brian_d over 9 years@sirwilliam, I coded out Jeroenjoosen's answer. Thanks for the solution, it works. stackoverflow.com/a/24597136/1342440