这篇文章主要介绍了jQuery拖拽 & 弹出层，有需要的朋友可以参考一下

  iDrag & iDialog 介绍 特点： iDialog.js依赖于jquery编写的简单易用的对话框，同时还可以通过添加css3，改变对话框的展现动画。提供了两个方法：   •1、拖拽函数 iDrag() 或 $.drag(); •2、对话框函数 iDialog() 或 $.dialog();  跨平台兼容: 兼容：IE6+、Firefox、Chrome等主流浏览器(其它暂时没条件测试)。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件。    渐进增强的体验: 确保IE家族功能完善的前提下，现代浏览器适当的添加css3增强体验，如阴影、圆角、和scale show、super scale show 、right slide show动画,动画亦可自己修改css文件进行扩展。    丰富的接口: 1．$.drag()函数，提供了拖拽范围设置，拖拽前，拖拽过程，拖拽结束的回调函数； 2．$.dialog()函数，提供了css3展示特效、大小、位置、显示、关闭和外部访问接口等，更多参考后面的API。    快速入门： <script src="lib/js/jquery-1.8.3.min.js"></script> <script src="lib/js/jquery.idialog.js" dialog-theme="default"></script> •jquery.iDialog.js是依赖jquery实现的，所以加载它之前必须加载jQuery; •dialog-theme="default"表示将自动加载default.css样式表; •default.css必须保存在theme文件夹里，且该文件夹与jquery.iDialog.js需在同一目录下。 iDrag()完整使用例子: JS代码：    代码如下: 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);       }     });       一个iDialog()使用例子:    代码如下: iDialog({         title:'Hello World',         id:'DemoDialog  ',         content:'<p>大家好：<br> 我是minDialog</p>',         lock: true,         width:500,         fixed: true,         height:300     });