jQuery实现可拖拽功能

作者：System 时间：2024年08月16日分类：所有,jquery 字数：1177

以下是一个使用jQuery实现的简单的可拖拽元素示例：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Draggable Element</title>
<style>
#draggable {
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
  cursor: pointer;
}
</style>
</head>
<body>
 
<div id="draggable"></div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// jQuery code here
</script>
</body>
</html>

jQuery部分：




$(function() {
  var isDragging = false;
  var offset = {};
  
  $('#draggable').on('mousedown', function(event) {
    isDragging = true;
    var $this = $(this);
    var x = event.pageX - $this.offset().left;
    var y = event.pageY - $this.offset().top;
    offset = { x: x, y: y };
  });
  
  $(document).on('mousemove', function(event) {
    if (isDragging) {
      var $draggable = $('#draggable');
      $draggable.css('left', (event.pageX - offset.x) + 'px');
      $draggable.css('top', (event.pageY - offset.y) + 'px');
    }
  });
  
  $(document).on('mouseup', function(event) {
    isDragging = false;
  });
});

这段代码实现了一个可以在页面上拖动的红色方块。用户可以点击方块并将其拖动到新位置。拖动操作是通过监听鼠标事件来实现的。

jQuery实现可拖拽功能

评论已关闭

推荐阅读