基于jquery的页面元素拖拽组件

很多人都希望页面元素可以像窗体元素一样操作，其实绝大多数的操作都是可行的，虽然像easyUI等这样的大牌插件也整合有drag操作，但部分功能不能满足个人要求，闲来无事，基于jquery写了一个可以复用js插件实现组件拖拽。
功能特点：

1. 拖拽时组件整体半透明
2. 拖拽时组件处于最顶层
3. 拖拽结束后恢复原透明度
4. 拖拽结束后恢复其z轴原层级

插件代码 drag.js

// JavaScript Document$(document).ready(function(e) {        var zIndex=0;        var mousex=0,mousey=0;        var divLeft,divTop;        $('.drag').css("cursor","pointer");//将光标改为手型        //鼠标单击目标时，保存初始的z轴索引顺序，和初始的目标的坐标以及鼠标光标的坐标，并进一步绑定一个鼠标移动事件        $('.drag').mousedown(function(e) {            var $pdiv=$(this).parent("div");            zIndex=$pdiv.css("z-index");            var offset=$pdiv.offset();            divLeft=parseInt(offset.left,10);            divTop=parseInt(offset.top,10);            $pdiv.css({"margin-left":"0px","left":divLeft});            mousex=e.pageX;            mousey=e.pageY;            $(this).bind('mousemove',dragElement);        });        //鼠标移动操作        function dragElement(event){            var left=divLeft+(event.pageX-mousex);            var top=divTop+(event.pageY -mousey);            $(this).parent("div").css({                'top':top+'px',                'left':left+'px',                'postion':'absolute',                'z-index':'100',                'opacity':'0.6'                             });             return false;               }        //鼠标释放时，接触移动绑定，恢复css样式初始        $(document).mouseup(function(e) {            $('.drag').unbind('mousemove');            $('.drag').parent("div").css({"opacity":"1","z-index":zIndex});        });    });

引入文件，先引入jquery，再引入drag插件

<script src="${pageContext.servletContext.contextPath}/Scripts/jquery-3.1.0.min.js"></script><script src="${pageContext.servletContext.contextPath}/Scripts/drag.js"></script>

使用时，外层使用div，里面放置用来拖拽的标签加class属性为drag，例如于标题栏，或者直接img进行拖拽。

<div style="position: absolute;"><div class="drag">用我拖拽</div>要显示的内容</div>

同志们，可以试试了
Created by 薛萌