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

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

上一篇：阿里云：企业上云要注意哪些事项？(小白必看)

下一篇：sql语句指定想要运行的索引

回复列表

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

400-692-8081