jQuery resizable（）对象不收回

Question

我不明白为什么这不起作用。我有一个div里面有一个iframe。我将jQuery resizable（）应用于div，并将“alsoResize”选项设置为我的iframe。这是它是如何实现的：

$("#my-frame-wrapper").resizable({ 
    alsoResize : '#myframe' 
}); 

基本上，我试图调整大小（）直接实现在iframe中，但它不会工作，所以我尝试这个方法。

的问题是：

如果我舒展的股利，它的工作原理（调整大小），但它不希望收回（如果我拖回）。相反，它会完全失去控制（在Chrome中），它会在每次移动鼠标时开始弹跳（非常烦人，我必须添加）。

有什么我失踪？有没有人遇到过这个问题？

Answer 1

iframe元素内部的鼠标事件不会熄灭，所以当您拖回时，JQuery UI没有反应。

为了防止iframe捕获鼠标事件，可以在拖动开始时添加一个遮罩div。

HTML：

<div id="my-frame-wrapper"> 
    <iframe id="my-frame" src="http://jsfiddle.net/"></iframe> 
    <div id="mask"></div> 
</div> 

CSS：

#my-frame-wrapper { 
    width:200px; 
    height:100px; 
    position:relative; 
} 
#my-frame { 
    width:100%; 
    height:100%; 
} 
#mask { 
    position:absolute; 
    top:0; 
    left:0; 
    margin:0; 
    padding:0; 
    width:100%; 
    height:100%; 
    display:none; 
} 

JS：

$(function(){ 
    $("#my-frame-wrapper").resizable({ 
     start: function(event, ui) { 
      $("#mask").css("display","block"); 
     }, 
     stop: function(event, ui) { 
      $("#mask").css("display","none"); 
     } 
    }); 
}); 

见jsfiddle。