jQuery Mouseup and Mousedown Event

The mousedown event is the first half of a click - the moment when you click the button before releasing it. This event can potentially be used to drag elements around a page. You can let visitors drag items around your web page just like they drag icons around their desktop - by clicking on them (without releasing the button) and moving them, and then releasing the button to drop them.

The mouseup event is the second half of a click - the moment when you release the button. This event is handy for responding to the moment when you drop an item that has been dragged. Let us learn with a simple example.


<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<div id="id1">
Point Mouse here, keep pressed and the release after some time. 

$('#id1').mousedown(function() {
 $("div#id1").text("You pressed mouse down");

$('#id1').mouseup(function() {
 $("div#id1").text("You released Mouse");


You may like to try this example here.