jquery Drag & Drop Layer Introduction and example

This article mainly introduces the jquery drag & drop layer, the need for friends can refer to

  Idrag & Idialog Introduction Features: Idialog.js relies on the Easy-to-use dialog box written in jquery, and can also change the display animation of the dialog box by adding CSS3. Two methods are provided:   1, drag-and-drop function Idrag () or $.drag (); • 2, Dialog function Idialog () or $.dialog ();  cross-platform Compatibility: Compatible: ie6+, Firefox, Chrome and other mainstream browsers (other temporary no conditions test). And IE6 can also support the modern browser static positioning (fixed), overwriting the Drop-down control.     Progressive enhancement experience: to ensure that the IE family function is perfect, the modern browser to add CSS3 enhanced experience, such as shadows, rounded corners, and scale show, Super Scale show, right slide show animation, Animations can also be extended by modifying CSS files themselves.     Rich interface: 1. $.drag () function, which provides drag-and-drop range settings, drag-and-drop process, drag-and-drop end of the callback function; 2. $.dialog () function, which provides CSS3 display effects, size, location, display, shutdown and external access interface, etc., more reference to the following API.     QuickStart: <script src= "Lib/js/jquery-1.8.3.min.js" ></script> <script src= "lib/js/ The Jquery.idialog.js "dialog-theme=" default ></script> Jquery.idialog.js is implemented by jquery, so you must load jquery before loading it; dialog-theme= "Default" indicates that the DEFAULT.CSS style sheet will be loaded automatically; Default.css must be saved in the theme folder, and the folder should be in the same directory as jquery.iDialog.js. Idrag () Complete Use example: JS code:    code 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.h tml (' 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= ' +po s.x+ ', top= ' +pos.y);      }    });       A idialog () Use example:     code as follows: Idialog ({       , title: ' Hello World ',         ID: ' Demodialog   ',         content: ' <p> everyone:<br> I'm mindialog&lt. ;/p> ',         Lock:true,         width:500,         fixed : True,         height:300    });