jquery实现简单拖拽效果

要使用jQuery实现简单的拖拽效果，可以依次完成以下步骤：

给需要拖拽的元素添加事件监听器

可以使用jQuery的on()函数给目标元素添加mousedown事件监听器，触发时执行处理函数。在处理函数中，可以设置一些拖拽所需的状态，例如记录当前元素的位置等。

例如，下面的示例中，给#draggable元素添加mousedown事件监听器，触发时记录下当前鼠标位置startX和startY，以及元素初始位置initialPos。

$('#draggable').on('mousedown', function(e) {
  var startX = e.pageX;
  var startY = e.pageY;
  var initialPos = $(this).position();
});

随着鼠标移动，修改元素位置

在mousedown事件监听器中，可以添加mousemove事件监听器，触发时修改元素的位置。获取到当前鼠标的位置curX和curY后，可以计算出新的元素位置newPos，并使用css()函数将元素移动到新位置。

例如，下面的示例中，利用上面记录的信息，根据鼠标移动的距离计算出目标元素的新位置，然后使用css()函数将元素移到新位置。

$('#draggable').on('mousemove', function(e) {
  var curX = e.pageX;
  var curY = e.pageY;
  var deltaX = curX - startX;
  var deltaY = curY - startY;
  var newPos = {
    left: initialPos.left + deltaX,
    top: initialPos.top + deltaY
  };
  $(this).css(newPos);
});

结束拖拽

当鼠标抬起时，需要清理掉之前添加的事件监听器，结束拖拽。

例如，下面的示例中，给目标元素添加mouseup事件监听器，在处理函数中清理掉之前添加的事件监听器。

$('#draggable').on('mouseup', function(e) {
  $(this).off('mousemove');
});

完整的代码示例如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery拖拽示例</title>
  <style>
  #draggable {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #9ee;
  }
  </style>
</head>
<body>
  <div id="draggable"></div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
  // 给目标元素添加mousedown事件监听器
  $('#draggable').on('mousedown', function(e) {
    var startX = e.pageX;
    var startY = e.pageY;
    var initialPos = $(this).position();

    // 给目标元素添加mousemove事件监听器
    $(this).on('mousemove', function(e) {
      var curX = e.pageX;
      var curY = e.pageY;
      var deltaX = curX - startX;
      var deltaY = curY - startY;
      var newPos = {
        left: initialPos.left + deltaX,
        top: initialPos.top + deltaY
      };
      $(this).css(newPos);
    });

    // 给目标元素添加mouseup事件监听器
    $(this).on('mouseup', function() {
      $(this).off('mousemove');
    });
  });
  </script>
</body>
</html>

实际应用中，可以根据需要添加一些限制，例如限制拖拽的范围、增加拖拽边界等。下面是一些示例：

限制拖拽范围：可以利用元素的最大最小坐标值来限制拖拽范围。例如，假设目标元素不得超出其父元素的可视区域，可以像下面这样修改上面的代码：

  // 给目标元素添加mousemove事件监听器
  $(this).on('mousemove', function(e) {
    var curX = e.pageX;
    var curY = e.pageY;
    var deltaX = curX - startX;
    var deltaY = curY - startY;
    var newPos = {
      left: initialPos.left + deltaX,
      top: initialPos.top + deltaY
    };
    var parent = $(this).parent();
    var maxX = parent.width() - $(this).width();
    var maxY = parent.height() - $(this).height();
    newPos.left = Math.min(Math.max(newPos.left, 0), maxX);
    newPos.top = Math.min(Math.max(newPos.top, 0), maxY);
    $(this).css(newPos);
  });

增加拖拽边界：可以在拖拽时，给目标元素添加一些边界效果。例如，拖拽时目标元素被按下的位置有一定的偏移，拖拽过程中也有一定的边界效果。下面是一个示例：

  var boundaryOffset = 5;
  var boundarySensitivity = 10;
  $(this).addClass('dragging');
  // 移除已有的mousemove和mouseup事件监听器
  $(this).off('mousemove').off('mouseup');
  $(document).on('mousemove.dragging', function(e) {
    var curX = e.pageX;
    var curY = e.pageY;
    var deltaX = curX - startX;
    var deltaY = curY - startY;
    var newPos = {
      left: initialPos.left + deltaX,
      top: initialPos.top + deltaY
    };
    var parent = $(drag).parent();
    var maxX = parent.width() - $(drag).width();
    var maxY = parent.height() - $(drag).height();

    // 添加边界效果
    if (newPos.left < boundaryOffset) {
      newPos.left = boundaryOffset;
    } else if (newPos.left > maxX - boundaryOffset) {
      newPos.left = maxX - boundaryOffset;
    } else if (deltaX > boundarySensitivity || deltaX < -boundarySensitivity || deltaY > boundarySensitivity || deltaY < -boundarySensitivity) {
      $('.bg-cover').css('opacity', '0.5');
    }
    if (newPos.top < boundaryOffset) {
      newPos.top = boundaryOffset;
    } else if (newPos.top > maxY - boundaryOffset) {
      newPos.top = maxY - boundaryOffset;
    }
    $(drag).css(newPos);
    return false;
  }).on('mouseup.dragging', function() {
    $(drag).removeClass('dragging');
    $('.bg-cover').css('opacity', '0');
    $(document).off('.dragging');
    $(drag).off('mousemove');
  });

在这个例子中，给目标元素添加了一个dragging类，当元素被拖拽时增加该类，移动和抬起鼠标时移除该类。同时，给document对象添加新的mousemove和mouseup事件监听器来绑定拖拽效果，这些监听器只在目标元素需要被拖拽的时候才会生效。在移动过程中，通过设置偏移量和敏感度来添加边界效果，当偏移量超过一定值时，顶部添加一个半透明覆盖层。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery实现简单拖拽效果 - Python技术站

jquery实现简单拖拽效果

相关文章