jQuery drag & drop layer introduction and examples_javascript skills

iDrag & iDialog Introduction
Features:
iDialog.js relies on simple and easy-to-use dialog boxes written by jquery. At the same time, you can also change the display animation of the dialog box by adding css3. Two methods are provided:

•1. Drag function iDrag() or $.drag();
•2. Dialog function iDialog() or $.dialog();
Cross-platform compatibility:
Compatible with: IE6, Firefox, Chrome and other mainstream browsers (others are temporarily unavailable for testing). And IE6 can also support the static positioning (fixed) and overlay drop-down controls of modern browsers.

Progressively enhanced experience:
Under the premise of ensuring that the IE family has complete functions, modern browsers appropriately add CSS3 enhanced experience, such as shadows, rounded corners, and scale show, super scale show, right slide show animation, animation You can also modify the css file yourself to expand it.

Rich interfaces:
1. The $.drag() function provides drag range setting, callback functions before dragging, dragging process, and dragging end; 2. The $.dialog() function provides CSS3 display effects, size, position, display, close and external access interfaces, etc. For more information, please refer to the API below.

Quick Start:


•jquery.iDialog.js is implemented by relying on jquery, so jQuery must be loaded before loading it;
•dialog-theme= "default" means that the default.css style sheet will be automatically loaded;
•default.css must be saved in the theme folder, and the folder and jquery.iDialog.js must be in the same directory.
Complete usage example of iDrag():
JS code:

Copy code The code is as follows:

var log = $('#drag-demo-log ');

iDrag({

target:'#drag-demo',

min:{x:0, y:0},

max:{x:658, y:170},

start: function (pos) {

log.html('start:x=' pos.x ', y=' pos.y);

},

move: function(pos){

log.html('move:left=' pos.x ', top=' pos.y);

},

end: function(pos){

log.html('end:left=' pos.x ', top=' pos.y);

}

});

An example of using iDialog():

Copy the code The code is as follows:

iDialog( {

title:'Hello World',

id:'DemoDialog ',

content:'

Hello everyone:
I am minDialog

',

lock: true,

width:500,

fixed: true,

height:300

});