jquery - jQuery UI 可拖动设置句柄取决于位置范围

Question

下面的代码引用了一个用作句柄（this）的块元素。此元素可通过 jQuery UI 拖动。我想要做的是确定手柄被放下的位置，并根据它被放入的范围“类别”，我将它动画到屏幕上的一个点。代码有效，我只是觉得我在重复自己，但我不知道如何总结。

         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");
        }

Answer 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");
        });

    }
}