How to solve the problem that jQuery EasyUI Dialog cannot be dragged down_jquery

Using jquery easyui, you can easily create a cool front-end page. Recently, I found a problem with the dialog during use:

After the user drags the dialog out of the page, the dialog cannot be dragged down unless the page is reopened. This issue is very important for the user experience,

So I started to study the easyu API to see if there were any corresponding functions or events to handle. It turned out that there was no ready-made one, so I had to think of a way:

The idea is as follows:

Use panel’s onOpen event to obtain the original left and top of diglog

When the user is dragging the dialog, use the onMove event of the panel to obtain the width and height of the body of the parent page where the dialog is located,

Through calculation, when the user drags the diglog out of the body, the panel's move function is used to move the dialog to the initial position.

After testing, this method works. The code is as follows:

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  
   }); 
    }
}
});

Some problems require everyone to discuss and research together to gain something. This article shares the solution to jQuery EasyUI Dialog that cannot be dragged down. I hope it can be helpful to everyone's study and help everyone successfully solve the problem that jQuery EasyUI Dialog cannot be dragged down. problem.