jQuery EasyUI Dialog拖不下來如何解決_jquery

使用jquery easyui可以很容易的創建很炫的前台頁面，最近在使用過程中發現dialog存在一個問題：

 用戶將dialog拖出頁面後，dialog就不能拖下來了，除非要重新打開頁面，這個問題對於用戶體驗來說是非常重要的，

所以就開始研究easyu API看看有沒有對應的函數或是事件去處理，結果發現沒有現成，只好自己想了個辦法：

思路如下：

          使用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拖不下來的問題。