Div Mousedown and move

by alirizaadiyahsi

HTML

<div class="container">
    
</div>
<span id="total">0</span>

CSS

.container {
 width:200px;
  height:200px;
   border:1px solid red;
   background-color:#EEE; 
}

JavaScript

var arena = $('.container'),
    total = $('#total');
var amount = 0;

var down = false;
var position = 0;
arena.bind({

    mousedown: function(e) {
        position = e.pageX;
        total.text("0");
        down = true;

    },
    mousemove: function(e) {
        if (!down) return;
        amount = e.pageX - position;
        total.text(amount)
    },
    mouseup: function() {
        down = false;
    }
})