可拖拽div层.doc

DragnDrop Demo body,html font-family:Calibri; font-size:12px; line-height:18px; .dragDiv2 background-color:#F0FBEB; border:1px solid #9BDF70; display:none; width:500px; height:400px; position:absolute; z-index:200; .dragDiv2 h5 background-color:#C2ECA7; padding:5px; margin:1px; .dragDiv2 h5 a .dragDiv2 div padding:5px; margin-bottom:10px; #fullbg position:fixed; cursor:pointer; background-color: Gray; display: none; z-index: 100; left: 0px; top: 0px; filter: Alpha(Opacity=30); -moz-opacity: 0.4; opacity: 0.4; var pagestyle = function() var bH = $(document).height(); var bW = $(document).width(); $(#fullbg).css( width: bW, height: bH); /注册窗体改变大小事件 $(window).resize(pagestyle); /注册弹出层拖动事件 $().ready(function() $(.dragDiv2).Drags( handler: .handler2, zIndex:200, opacity:.9 ); ); /显示灰色JS遮罩层 显示弹出层 function showBg(ct, content) var bH = $(document).height(); var bW = $(document).width(); $(#fullbg).css( width: bW, height: bH, display: block ); $(.dragDiv2).css(display, block) .css(left,($(document).width()/2-(parseInt($(.dragDiv2).width()/2)+px) .css(top,($(document).height()/2-(parseInt($(.dragDiv2).height()/2)+px); /关闭灰色JS遮罩层 关闭弹出层 function closeBg() $(#fullbg).css(display, none); $(.dragDiv2).css(display, none); 显示 Drag me too关闭 zIndex: 200, opacity: .9 jQuery插件 / /(function($) $.extend($.fn, getCss: function(key) var v = parseInt(this.css(key); if (isNaN(v) return false; return v; ); $.fn.Drags = function(opts) var ps = $.extend( zIndex: 20, opacity: .7, handler: null, onMove: function() , onDrop: function() , opts); var dragndrop = drag: function(e) var dragData = e.data.dragData; dragData.target.css( left: dragData.left + e.pageX - dragData.offLeft, top: dragData.top + e.pageY - dragData.offTop ); dragData.handler.css( cursor: move ); dragData.onMove(e); , drop: function(e) var dragData = e.data.dragData; dragData.target.css(dragData.oldCss); /.css( opacity: ); dragData.handler.css(cursor, dragData.oldCss.cursor); dragData.onDrop(e); $().unbind(mousemove, dragndrop.drag) .unbind(mouseup, dragndrop.drop); return this.each(function() var me = this; var handler = null; if (typeof ps.handler = undefined | ps.handler = null) handler = $(me); else handler = (typeof ps.handler = string ? $(ps.handler, this) : ps.handle); handler.bind(mousedown, e: me , function(s) var target = $(s.data.e); var oldCss = ; if (target.css(position) != absolute) try target.position(oldCss); catch (ex) target.css(position, absolute); oldCss.cursor = target.css(cursor) | default; oldCss.opacity = target.getCss(opacity) | 1; var dragData = left: oldCss.left | target.getCss(left) | 0, top: oldCss.top | target.getCss(top) | 0, width: target.width() | target.getCss(width), height: target.height() | target.getCss(height), offLeft: s.pageX, offTop: s.pageY, oldCss: oldCss, onMove: ps.onMove, onDrop: ps.onDrop, handler: handler, target: target target.css