0

次のコードは、ハンドル（this）として機能しているブロック要素を参照しています。この要素は、jQueryUIを介してドラッグできます。私がやろうとしているのは、ハンドルがドロップされた位置を特定し、ハンドルがドロップされた「カテゴリ」の範囲に応じて、画面上のポイントにアニメーション化します。コードは機能します私は自分自身を繰り返しているように感じますが、これを要約する方法がわかりません。

         stop: function( event, ui ) {

            var left = ui.position.left,

                position = "";

            if (left >= 0 && left <= 80) {
                $(this).animate({left: 20}, 200);
                position = 1;
            }

            if (left >= 81 && left <= 198) {
                $(this).animate({left: 137}, 200);
                position = 2;
            }

            if (left >= 199 && left <= 315) {
                $(this).animate({left: 254}, 200);
                position = 3;
            }

            if (left >= 316 && left <= 430) {
                $(this).animate({left: 371}, 200);
                position = 4;
            }

            if (left >= 431 && left <= 548) {
                $(this).animate({left: 488}, 200);
                position = 5;
            }

            if (left >= 549) {
                $(this).animate({left: 605}, 200);
                position = 6;
            }

            $(content).children().fadeOut(300, "linear");
            $(content).children(':nth-child('+ position +')').delay(299).fadeIn(600, "linear");
        }
4

1 に答える 1

1 
//maybe something like this?

stop: function( event, ui ) {

    var left = ui.position.left, position = [];

    if (left >= 0 && left <= 80)
        position = [20, 1];

    if (left >= 81 && left <= 198)
        position = [137, 2];

    if (left >= 199 && left <= 315)
        position = [254, 3];

    if (left >= 316 && left <= 430)
        position = [371, 4];

    if (left >= 431 && left <= 548)
        position = [488, 5];

    if (left >= 549)
        position = [605, 6];

    // OR
    /*
     var position = ((left >= 0 && left <= 80) ? [20, 1] :
     ((left >= 81 && left <= 198) ? [137, 1] :
     ((left >= 199 && left <= 315) ? [254, 3] :
     ((left >= 316 && left <= 430) ? [371, 4] :
     ((left >= 431 && left <= 548) ? [488, 5] :
     ((left >= 549) ? [605, 6] : [] ) ) ) ) ) );
     */
    if (position.length) {
        $(this).animate({
            left : position[0]
        }, 200);
        $(content).children().fadeOut(300, "linear", function() {
            $(content).children(':nth-child(' + position[1] + ')').delay(299).fadeIn(600, "linear");
        });

    }
}
于 2012-11-27T21:42:10.823 に答える