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