Attachez l'événement "dragstart" à "mouseup" pour obtenir une expérience dragable

Question

Vous cherchez une solution pour faire glisser un élément après l'événement "mouseup".

Comme vous le savez, un glissement se produit lorsqu'il reçoit des événements "mousedown" et "mousemove".

Comment puis-je obtenir un glissement avec l'événement «mouseup»? (Lorsque le clic est réalisé)?

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

Vous pouvez toujours utiliser la méthode $('.box').on('click', function(e) { ... qui pourrait le faire, mais gardez à l'esprit que vous devez ajouter un autre sur clic ou désactiver doubleclick, il est également tout à fait une comportement bizarre

explication de l'échantillon de ce que je veux dire

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

Voici comment je le ferais bien

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