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

    } 
}