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

最新推荐文章于 2025-05-22 11:48:09 发布

原创最新推荐文章于 2025-05-22 11:48:09 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#编辑器 #markdown #uml

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种基于jQuery编写的可复用拖拽JS插件，该插件使页面元素具有类似窗体的拖拽功能，包括拖拽时元素半透明、置顶显示，拖拽结束后恢复原状。提供了插件代码引入和使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

拖拽时组件整体半透明
拖拽时组件处于最顶层
拖拽结束后恢复原透明度
拖拽结束后恢复其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 薛萌
这里写图片描述