jQuery拖拽 & 彈出層介紹與示例

 這篇文章主要介紹了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     });