将“dragstart”事件附加到“mouseup”以获得可拖动体验

Posted 2023-05-08

【中文标题】将“dragstart”事件附加到“mouseup”以获得可拖动体验

【英文标题】：Attach "dragstart" event to "mouseup" to obtain draggable experience

【发布时间】：2017-12-30 03:02:40

【问题描述】：

寻找在“mouseup”事件后拖动元素的解决方案。

如您所知，当它收到“mousedown”和“mousemove”事件时会发生拖动。

如何通过“mouseup”事件实现拖动？ （什么时候实现点击）？

https://codepen.io/pklauzinski/pen/rxroyL

// Implement drag and drop for the image
$('.box').on('mousedown', function(e) 
    var $this = $(this),
        $window = $(window),
        mouseX = e.pageX,
        mouseY = e.pageY,
        width = $this.outerWidth(),
        height = $this.outerHeight()
        elemX = $this.offset().left + width - mouseX,
        elemY = $this.offset().top + height - mouseY;

    e.preventDefault();
    $window.on('mousemove.drag', function(e2) 
        $this.offset(
            left: e2.pageX + elemX - width,
            top: e2.pageY + elemY - height
        );
    ).one('mouseup', function() 
        $window.off('mousemove.drag');
    );
);

【问题讨论】：

问题是为什么？对于大多数用户来说，这是出乎意料的行为，您将如何停止拖动？

我会停止拖动“mousedown”。

但是当鼠标再次释放时，它是一个点击，并且拖动又重新开始了。除非按下鼠标按钮，否则总是可以拖动某些东西似乎很奇怪。

这似乎与以下内容重复：***.com/questions/13518371/… 该问题的答案中的解决方案对我有用

jquery ui drag element without keeping mouse button down (follow the cursor)的可能重复

【参考方案1】：

您始终可以使用$('.box').on('click', function(e) 方法...可以做到这一点，但请记住，您必须在单击或双击时添加另一个以禁用，此外，这是一种非常奇怪的行为

我的意思的示例解释

// Implement drag and drop for the image
$('.box').on('click', function(e) 
  var $this = $(this),
      $window = $(window),
      mouseX = e.pageX,
      mouseY = e.pageY,
      width = $this.outerWidth(),
      height = $this.outerHeight()
      elemX = $this.offset().left + width - mouseX,
      elemY = $this.offset().top + height - mouseY;

  e.preventDefault();
  $window.on('mousemove.drag', function(e2) 
      $this.offset(
          left: e2.pageX + elemX - width,
          top: e2.pageY + elemY - height
      );
  ).one('mousedown', function() 
      $window.off('mousemove.drag');
  );
);

这就是我的做法

// Implement drag and drop for the image
$('.box').on('mousedown', function(e) 
  var $this = $(this),
      $window = $(window),
      mouseX = e.pageX,
      mouseY = e.pageY,
      width = $this.outerWidth(),
      height = $this.outerHeight()
      elemX = $this.offset().left + width - mouseX,
      elemY = $this.offset().top + height - mouseY;

  e.preventDefault();
  $window.on('mousemove.drag', function(e2) 
      $this.offset(
          left: e2.pageX + elemX - width,
          top: e2.pageY + elemY - height
      );
  ).one('click', function() 
      $window.off('mousemove.drag');
  );
);