基于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 薛萌