Detect Mouse Down/Drag

This jQuery will indicate when the mouse is clicked and dragged within the document.

HTML

<div id="move">

</div>
<br>
<br>
<br>
<div id="mouse">

</div>

CSS

#move {
  height: 100px;
  width: 100px;
  background-color: red;
   position:relative;
    -webkit-animation: bounce 2s infinite;
    -moz-animation: bounce 2s infinite;
    -o-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}


#move:active {    
    -webkit-animation: shake 0.1s ease-in-out 0.1s infinite alternate;
}

@-webkit-keyframes shake {
 from {
    -webkit-transform: rotate(10deg);
 }
 to {
   -webkit-transform-origin:center center;
   -webkit-transform: rotate(-10deg);
 }

}


@-webkit-keyframes bounce {
    0%       { bottom:10px; }
    50%      { bottom:-1px; }
    1


00%     {bottom: 10px;}
}







@-moz-keyframes bounce {
    0%       { bottom:10px; }
    50%      { bottom:-1px; }
    100%     {bottom: 10px;}
}

@-o-keyframes bounce {
    0%       { bottom:10px; }
    50%      { bottom:-1px; }
    100%     {bottom: 10px;}
}

JavaScript

$(function() {
    var leftButtonDown = false;
    $(document).mousedown(function(e){
        // Left mouse button was pressed, set flag
        if(e.which === 1) leftButtonDown = true;
    });

    
    function tweakMouseMoveEvent(e){
        // Check from jQuery UI for IE versions < 9
        if ($.browser.msie && !(document.documentMode >= 9) && !event.button) {
            leftButtonDown = false;
        }
        
        // If left button is not set, set which to 0
        // This indicates no buttons pressed
        if(e.which === 1 && !leftButtonDown) e.which = 0;
    }

    $(document).mousemove(function(e) {
        tweakMouseMoveEvent(e);
        $('#mouse').text('which: ' + e.which);
    });
});