0

それぞれがピース要素を移動する4つの矢印があります。これで、ピースをデフォルトの場所に戻すリセットボタンを作成します。

//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'));
    });
});
4

2 に答える 2

2 
   //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();
    });

});

reset上記で定義した方法を使用できます。フィドル

于 2012-10-17T18:40:20.083 に答える
1

CSSプロパティを空の文字列に設定してリセットできます：http：//jsfiddle.net/myJCq/。

piece.reset = function() {
    this.el.css({ left: '', top: '' });
};
于 2012-10-17T18:39:35.297 に答える