Home>

Using jquery easyui, you can easily create a beautiful front page,Recently, a problem was found in the dialog during use:

After the user drags the dialog out of the page,dialog cannot be dragged down,Unless i want to reopen the page,This question is very important for the user experience,

So I started to study easyu api to see if there are corresponding functions or events to handle.It turned out that it was not readily available,I had to figure it out myself:

The idea is as follows:

Use panel's onopen event to get the original left and top of the diglog

When the user drags the dialog, use the onmove event of the panel to get the width and height of the parent page body where the dialog is located

via calculations,When the user drags the diglog out of the body, use the panel's move function to move the dialog to the initial position.

After testing the method works,The code looks like this:

var default_left;
var default_top;
$("#details_dd"). dialog ({
  title:"Details",  modal:true,  onopen:function () {
  //dialog primitive left
  default_left=$("#details_dd"). panel ("options"). left;
     //dialog original top
   default_top=$("#details_dd"). panel ("options"). top;
},  onmove:function (left, top) {//Event when mouse is dragged
   var body_width=document.body.offsetwidth;//body's width
   var body_height=document.body.offsetheight;//body height
   var dd_width=$("#details_dd"). panel ("options"). width;//dialog width
   var dd_height=$("#details_dd"). panel ("options"). height;//dialog height
   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
   });
    }
}
});
  • Previous JQuery to achieve left and right scroll menu special effects
  • Next Django error with ajax post data 403 error how to solve