用jQuery实现一个可以拖动的元素

HTML代码：

<div class="draggable">可拖动的元素</div>

CSS代码：

.draggable {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  position: absolute;
  cursor: move;
}

jQuery代码：

$(function() {
  var draggable = $('.draggable');
  var offset = null;
  var dragging = false;

  draggable.on('mousedown', function(e) {
    offset = {
      x: e.offsetX,
      y: e.offsetY
    };
    dragging = true;
  });

  $(document).on('mousemove', function(e) {
    if (dragging) {
      var x = e.pageX - offset.x;
      var y = e.pageY - offset.y;
      draggable.css({
        left: x + 'px',
        top: y + 'px'
      });
    }
  }).on('mouseup', function() {
    dragging = false;
  });
});

该代码监听鼠标事件，当鼠标在可拖动元素上按下时，记录鼠标位置与元素位置之间的偏移量，并将dragging标志设置为true，表示正在拖动元素。当鼠标在文档中移动时，如果dragging标志为true，则将可拖动元素的位置设置为当前鼠标位置减去偏移量。当鼠标松开时，将dragging标志设置为false，表示拖动结束。