从基础开始-draggable.js

最新推荐文章于 2024-06-23 09:43:45 发布

原创最新推荐文章于 2024-06-23 09:43:45 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何利用jQuery库实现HTML元素的拖拽功能，包括事件监听、位置计算及响应处理，通过实例演示实现过程。

下面是自己写的draggable.js(仅供参考)

draggable.js:

(function(){
  jQuery.fn.extend({
    draggable: function(){
      var $this = $(this);

      $this.css({position: "relative"});

      $(this).on("mousedown", function(){
        $(document).on("mousemove", function(e){
          e.preventDefault();
          var mouseX = e.pageX || e.offsetX ;
          var mouseY = e.pageY || e.offsetY;

          var $target = null;
          var $temp = $this.parent();
          while(!$temp.is("html")) {
            var position = $temp.css("position");
            if(position == "relative" || position == "absolute") {
              $target = $temp;
              break;
            } else {
              $temp = $temp.parent();
            }
          }

          if(!$target) {
            $target = $("body");
          }

          var top = mouseY - $target.offset().top - $this.height()/2,
          left = mouseX - $target.offset().left - $this.width()/2;

          $this.css("top", top);
          $this.css("left", left);
        });


        $(document).on("mouseup", function(){
          $(document).off("mousemove");
        });
      });
    }
  });  
})(jQuery);

draggable.css

.draggable {
  border: 1px dotted black;
}

html:

<!docttype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="draggable.css">
  </head>
  <body>
    <div class="resizable">sdfsdffffff</div>
    
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="draggable.js"></script>
    <script type="text/javascript" src="index.js"></script>
  </body>
</html>

js:

(function(){
  $(".draggable").draggable();
})(jQuery);