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.
<html>
<head>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
</head>
<div id="id1">
Point Mouse here, keep pressed and the release after some time.
</div>
<script>
$('#id1').mousedown(function() {
$("div#id1").text("You pressed mouse down");
});
$('#id1').mouseup(function() {
$("div#id1").text("You released Mouse");
});
</script>
</body>
</html> |
You may like to try this example here.