jQuery Dual Range Slider Reload

Question

Я хочу построить слайдер с двумя диапазонами в jQuery самостоятельно. Моя первая попытка рода работ. Но иногда, если я отпускаю кнопку мыши после перетаскивания слайда, сайт автоматически перезагружается. Я загрузил свой код на jsfiddle:

http://jsfiddle.net/u2d8P

Вот часть JS:

$(document).ready(function() { 

    var $dragging = null; 

    $('.slider').bind("mousemove", function(e) { 
     if ($dragging) { 
      if (e.pageX<200) { 
       $dragging.offset({ 
        left: e.pageX 
       }); 
      } 

     } 
    }); 

    $('.left_slider').bind("mousedown", function (e) { 
     $dragging = $(e.target); 
    }); 

    $('.right_slider').bind("mousedown", function (e) { 
     $dragging = $(e.target); 
    }); 

    $('.slider').bind("mouseup", function (e) { 
     $dragging = null; 
    }); 
}); 

Даже в скрипке он перезагружает иногда после отпускания кнопки мыши. Что я делаю неправильно?

Заранее благодарим за вашу помощь!

Greetz

Answer 1

Поскольку ваши якоря (они даже должны быть якорями?) Не имеет href значения (которое является недействительным, кстати), действие по умолчанию, чтобы перезагрузить текущую страницу. Вам нужно либо использовать preventDefault, чтобы остановить это, либо использовать такое значение, как # или javascript:void(0).

http://jsfiddle.net/isherwood/u2d8P/1/

<a href="#" class="left_slider"></a> 
<a href="#" class="right_slider"></a> 

---

Вот как вы могли бы сделать это с помощью preventDefault. Кредит Джо Куллинану.

http://jsfiddle.net/hPkS6