CODEWITHSUNDEEP
jquerycssjquery-uijquery-animate
Jonny Sooter
Jonny Sooter

Reputation: 2417

jQuery UI Draggable setting handle depending on a position range

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

Upvotes: 0

Views: 230

Answers (1)

Luca Filosofi
Luca Filosofi

Reputation: 31173

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

    }
}

Upvotes: 1

Related Questions