Question

I have 4 arrows that each one moving the piece element
now i want to create a reset button that will return the piece to the default place

//piece object
var piece = {};
piece.el = $('#piece');
piece.moveDelta = function(dx, dy){
    var pos = this.el.position();
    this.el.css('left', pos.left+dx);
    this.el.css('top', pos.top+dy);
};
$(document).ready(function(){
    //init deltas
    $('#btn-up').data('dx', 0).data('dy', -100);
    $('#btn-left').data('dx', -100).data('dy', 0);
    $('#btn-right').data('dx', 100).data('dy', 0);
    $('#btn-down').data('dx', 0).data('dy', 100);
    //assign click event
    $('.btn-arrow').click(function(){
        piece.moveDelta($(this).data('dx'), $(this).data('dy'));
    });
});

Answer 1

   //piece object
var piece = {};

var defaultX = null;
var defaultY = null;

piece.el = $('#piece');
piece.moveDelta = function(dx, dy){
    var pos = this.el.position();
    if(defaultX === null && defaultY === null ){
         defaultX = pos.left;
         defaultY = pos.top;
    }
    this.el.css('left', pos.left+dx);
    this.el.css('top', pos.top+dy);
};
piece.reset = function () {
   this.el.css('left', defaultX);
   this.el.css('top', defaultY);
};
$(document).ready(function(){
    //init deltas
    $('#btn-up').data('dx', 0).data('dy', -100);
    $('#btn-left').data('dx', -100).data('dy', 0);
    $('#btn-right').data('dx', 100).data('dy', 0);
    $('#btn-down').data('dx', 0).data('dy', 100);


    //assign click event
    $('.btn-arrow').click(function(){
        piece.moveDelta($(this).data('dx'), $(this).data('dy'));
    });
    $("#btn-reset").click(function(){
       piece.reset();
    });

});

you can use the reset method defined above. Fiddle