新闻资讯

新闻资讯 通知公告

jQuery实现拖拽,不用jQuery UI的中文编程实现方法(亲测好用)

编辑:009     时间:2020-03-02

这里例子可以用于Web IDE、工作流拖拽 、在线界面设计,更多功能敬请各位开发分享


<!DOCTYPE html>
<html>
 
<head>
    <title>jQuery拖放操作演示</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        const 事件_鼠标按下 = "mousedown";
        const 事件_鼠标抬起 = "mouseup";
        const 事件_鼠标移动 = "mousemove";
        const 左 = "left";
        const 上 = "top";
        const 定位方式 = "position";
        const 绝对 = "absolute";
        const 空 = null;
        const 假 = false;
        const 真 = true;
        const 未定义 = undefined;
        $.fn.获取位置 = $.fn.position;
        $.fn.绑定事件 = $.fn.on;
        $.fn.解绑事件 = $.fn.off;
        $.fn.样式 = $.fn.css;
 
        $.fn.拖放 = function () {
            let 位置, 拖拽状态, 开始偏移量X, 开始偏移量Y, 目标组件;
            let 拖放容器 = $("html");
            $(this).解绑事件();
            $(this).绑定事件(事件_鼠标按下, function (事件) {
                目标组件 = this;
                位置 = $(目标组件).获取位置();
                开始偏移量X = 事件.pageX;
                开始偏移量Y = 事件.pageY;
                拖拽状态 = 真;
            })
            拖放容器.绑定事件(事件_鼠标抬起, function (事件) {
                位置 = 空; 拖拽状态 = 假; 开始偏移量X = 空; 开始偏移量Y = 空; 目标组件 = 空;
            })
            拖放容器.绑定事件(事件_鼠标移动, function (事件) {
                if (拖拽状态 == 真 && 目标组件 != 未定义) {
                    $(目标组件).样式(左, 位置.left + (事件.pageX - 开始偏移量X))
                    $(目标组件).样式(上, 位置.top + (事件.pageY - 开始偏移量Y))
                    $(目标组件).样式(定位方式, 绝对)
                }
            })
        };
 
        $(() => {
            $(".可拖放").拖放();
        })
    </script>
</head>
 
<body>
    <div class="可拖放" style="width:30px;height: 30px;background-color: red;"></div>
    <div class="可拖放" style="width:30px;height: 30px;background-color: blue;"></div>
</body>
 
</html>


原文链接:https://blog.csdn.net/yry0304/article/details/90779662

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

回复列表

相关推荐