sortable iframe

Q：使用jQuery ui 的sortable ，当div里面的为iframe框架时，div 拖动过快出现卡顿或鼠标失去焦点现象？ A：当鼠标在handle点击进行拖动时，鼠标移动速度过快，经过iframe框架时，handle区域失去鼠标移动事件造成。 S: 在初始化sortable的js中加入start和stop事件和有底色代码，如下： $( ".column" ).sortable({ connectWith: ".column",//能更那些元素一起排序 scroll:false,//拖动时所在区域不滚动 opacity: 0.6,//拖动时被拖动组件透明度 revert: true,//被拖动组件归位时的效果 cursor:"move",//拖动时鼠标样式 items:"> .portlet",//哪些元素为排序拖动 update:function(event,ui){//当组件位置发生改变时触发 var column = $(this); updateWidgetOrder(column); }, start:function(event,ui){//组件开始拖动时触发，给每个iframe加上遮罩层 $("iframe").each(function() { $("") .css({ width: this.offsetWidth+"px", height: this.offsetHeight+"px", position: "absolute", opacity: "0.001", zIndex: 1001 }) .css($(this).offset()) .appendTo("body"); }); }, stop:function(event,ui){//组件拖动结束后触发，去除所有的遮罩层 $("div.ui-draggable-iframeFix").each(function() { this.parentNode.removeChild(this); }); } }).disableSelection(); BT: 下面是我自己解决这个问题的思路，只是想跟各位一起学习下，各位看了请不要吐槽，内容比较多。也许网上有其他已解决该问题的，各位可以把其他方法的地址直接留言给我吧，先谢谢了。 1.查看jQuery ui sortable api 地址： 可知sortable可配置的一些属性为 既然sortable组件可以拖动，那么一定要参考draggable api 2.查看jQuery ui draggable api 地址： 可知sortable可配置的一些属性为 注意该属性中“iframeFix” 该属性意为：阻止iframe在组件拖动过程中捕捉到鼠标移动的事件。 3.那么能不能直接在sortable的初始化js里面直接使用iframeFix属性？ 测试： 结果发现没有用。 找原因： 1.Draggable 继承的是 2.Sortable 继承的是 3.查看jquery.ui.draggable.js 源码可看到 这个iframeFix 属性所在的三个地方，说明该属性仅仅实在jquery.ui.draggable.js 文件里面进行定义和使用的，在 这三个js类里面没有进行定义和说明，所以sortable是无法继承和直接使用该属性。 4.参考iframeFix属性的原理，直接在sortable的js上加上代码 既然不能直接使用，就参考iframeFix实现的原理，在sortable的初始化js的start和stop代码上直接加上 Iframe增加遮罩层的代码： $(o.iframeFix === true ? "iframe" : o.iframeFix).each(function() { $("") .css({ width: this.offsetWidth+"px", height: this.offsetHeight+"px", position: "absolute", opacity: "0.001", zIndex: 1000 }) .css($(this).offset()) .appendTo("body"); }); 去除iframe遮罩层代码： //remove frame helpers $("div.ui-draggable-iframeFix").each(function() { this.parentNode.removeChild(this); });