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