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

Question

寻找在 "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');
    });
});

Answer 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');
  });
});

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

Attach "dragstart" event to "mouseup" to obtain draggable experience

javascript

jquery

drag-and-drop

draggable

drag