jQuery EasyUI Dialog拖不下來如何解決
使用jquery easyui可以很容易的創(chuàng)建很炫的前臺頁面,最近在使用過程中發(fā)現dialog存在一個問題:
用戶將dialog拖出頁面后,dialog就不能拖下來了,除非要重新打開頁面,這個問題對于用戶體驗來說是非常重要的,
所以就開始研究easyu API看看有沒有相應的函數或者事件去處理,結果發(fā)現沒有現成,只好自己想了個辦法:
思路如下:
使用panel的onOpen事件,取得diglog的原始left和top
當用戶在拖動dialog過程中,使用panel的onMove事件取得dialog所在父頁面body的width和height,
通過計算,當用戶將diglog拖動出body時,使用panel的move函數將dialog移動到初始的位置。
經過測試次方法可行,代碼如下所示:
var default_left;
var default_top;
$('#details_dd').dialog({
title:'詳細信息',
modal: true,
onOpen:function(){
//dialog原始left
default_left=$('#details_dd').panel('options').left;
//dialog原始top
default_top=$('#details_dd').panel('options').top;
},
onMove:function(left,top){ //鼠標拖動時事件
var body_width=document.body.offsetWidth;//body的寬度
var body_height=document.body.offsetHeight;//body的高度
var dd_width= $('#details_dd').panel('options').width;//dialog的寬度
var dd_height= $('#details_dd').panel('options').height;//dialog的高度
if(left<1||left>(body_width-dd_width)||top<1||top>(body_height-dd_height)){
$('#details_dd').dialog('move',{
left:default_left,
top:default_top
});
}
}
});
有些問題就需要大家一起討論研究才會有所收獲,本文分享的jQuery EasyUI Dialog拖不下來的解決辦法,希望可以對大家的學習有所幫助,幫助大家順利解決jQuery EasyUI Dialog拖不下來的問題。
相關文章
jQuery創(chuàng)建平滑的頁面滾動(頂部或底部)
如何創(chuàng)建一個平滑的滾動效果是本文的目的使用jQuery讓您可以滾動到你的網頁的頂部或底部,相當不錯的一個效果,感興趣的你可不要錯過了哈2013-02-02
快速移動鼠標觸發(fā)問題及解決方法(ECharts外部調用保存為圖片操作及工作流接線mouseenter和mouseleav
這篇文章主要介紹了快速移動鼠標所觸發(fā)的問題及解決方法(ECharts外部調用保存為圖片操作及工作流接線mouseenter和mouseleave),非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-08-08

