JQuery Easyui Dialog can't drag down how to solve _jquery

Source: Internet
Author: User

Using jquery Easyui makes it easy to create very cool foreground pages, and recently found a problem with dialog in the use process:

After the user drags the dialog out of the page, dialog cannot be dragged down, unless the page is reopened, which is important to the user experience.

So began to study the Easyu API to see if there is a corresponding function or event to deal with, the results found no ready-made, had to think of a way:

Ideas are as follows:

Use the panel's OnOpen event to get the original left and top of the Diglog

When the user is dragging dialog, the OnMove event of the panel is used to get the width and height of the body of dialog's parent page.

By calculating, when the user drags the diglog out of the body, the move function of the Panel moves the dialog to its original position.

After testing the method is feasible, the code looks like this:

var default_left;
var default_top;
$ (' #details_dd '). Dialog ({
  title: ' Details ',
  modal:true,
  onopen:function () { 
  //dialog original
  left default_left=$ (' #details_dd '). Panel (' Options '). Left; 
     Dialog the original top
   default_top=$ (' #details_dd '). Panel (' Options '). Top;     
},
  onmove:function (left,top) {//
   the width of the event var body_width=document.body.offsetwidth;//body when the mouse is dragged
   var body_height=document.body.offsetheight The height of the//body
   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  
   });

Some problems need everyone to discuss the research will be harvested, this article to share the jquery Easyui dialog dragged down the solution, I hope you can learn some help to help us successfully solve the jquery Easyui dialog can not drag down the problem.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.