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

    } 
}