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.