// Drog & Drop Sample Standard Version

window.addEventListener('load', init, false);

function init() {
    var sample = document.getElementById('sample');
    sample.addEventListener('mouseover', mouseover, false);
    sample.addEventListener('mouseout',  mouseout,  false);
}

function mouseover(evt) {
    evt.target.addEventListener('mousedown', mousedown, false);
}

function mouseout(evt) {
    evt.target.removeEventListener('mousedown', mousedown, false);
}

function mousedown(evt) {
    this.ex = evt.clientX - parseInt(evt.target.style.left);
    this.ey = evt.clientY - parseInt(evt.target.style.top);
    evt.target.addEventListener('mousemove', mousemove, false);
    evt.target.addEventListener('mouseup',   mouseup,   false);
}

function mousemove(evt) {
    var dx = evt.clientX - this.ex;
    var dy = evt.clientY - this.ey;
    if(dx < 0) {
        dx = 1;
    }
    if(dy < 0) {
        dy = 1;
    }
    evt.target.style.left = dx + 'px';
    evt.target.style.top  = dy + 'px';
}

function mouseup(evt) {
    evt.target.removeEventListener('mousemove', mousemove, false);
    evt.target.removeEventListener('mouseup',   mouseup,   false);
}