Question

The code that follows refers to a block element that is serving as a handle (this). This element is draggable through the jQuery UI. What I’m trying to do is determine the position the handle was dropped and depending on the range “category” it’s dropped in, I animate it to a point on the screen. The code works I just feel like I’m repeating myself but I don’t know how to sum this up.

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

    }
}