jquery-拖拽插件

最新推荐文章于 2024-06-05 10:04:13 发布

原创最新推荐文章于 2024-06-05 10:04:13 发布 · 330 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery拖拽插件 #拖拽插件

实用同时被 2 个专栏收录

43 篇文章

订阅专栏

jQuery插件

14 篇文章

订阅专栏

这篇博客介绍了如何使用jQuery创建一个自定义的拖拽插件。通过在元素上监听mousedown、mousemove和mouseup事件，实现了元素在页面上的自由拖动，并确保了元素不会超出窗口边界。示例代码展示了如何初始化和应用这个拖拽功能。

html：

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="js/jquery-1.11.0.js"></script>
       <script src="js/drag.js"></script>
       <style>
           * {
               margin: 0;
               padding: 0;
           }
       </style>
   </head>

       </div>
       <script>
           $("#box").dragDiv()
       </script>
   </body>
</html>

js：

;(function($){
   $.fn.dragDiv = function(options){
       var defaults = {
           "width":100,
           "height":100,
           "background":"red",
           "position":"absolute"
       }

       var options = $.extend(defaults, options);

       this.each(function(){
           var _this = $(this)
//           console.log(_this)
           _this.css({
               "width": options.width,
               "height": options.height,
               "background": options.background,
               "position": options.position
           })
           _this.mousedown(function(e){
               var disX = e.pageX - _this.offset().left
               var disY = e.pageY - _this.offset().top
               $(document).mousemove(function(e){
                   var l = e.pageX - disX
                   var t = e.pageY - disY
                   if(l<0){
                       l = 0
                   }
                   if(t<0){
                       t = 0
                   }
                   if(t>$(window).height()-_this.height()){
                       t = $(window).height()-_this.height()
                   }
                   if(l>$(window).width()-_this.width()){
                       l = $(window).width()-_this.width()
                   }
                   _this.css({
                       "left":l,
                       "top":t
                   })
               })
               $(document).mouseup(function(){
                   $(document).off("mousemove")
               })
           })
       })
   }
})(jQuery)