創建一個可拖動滑塊，事件問題

Question

我試圖構建一個可重用滑塊。

我遇到了使其正常工作的問題。

function BasicSlider($cont) { 
     this.$cont = $cont; 
     this.$handle = null; 
     this.isMouseDown = false; 
     this.width = this.$cont.width(); 

     this.init(); 
     } 

     BasicSlider.prototype.init = function() { 
     this.buildMarkUp(); 
     this.bindHandlers(); 
     } 

     BasicSlider.prototype.buildMarkUp = function() { 
     var markUp = '<div class="basic-slider"><div class="basic-slider-trail"></div><div class="basic-slider-handle"></div></div>'; 

     this.$cont.html(markUp); 
     this.$handle = $('.basic-slider-handle', this.$cont); 
    } 

     BasicSlider.prototype.bindHandlers = function() { 
    var prxDoDrag = $.proxy(function (evt) { 
     if (this.isMouseDown) { 
      this.$handle.css({'left' : evt.offsetX + 'px'}); 
     } 
    }, this); 

    var prxDoMouseDown = $.proxy(function (evt) { 
     this.isMouseDown = true; 
    }, this); 

    var prxDoMouseUp = $.proxy(function (evt) { 
     this.isMouseDown = false; 
    }, this); 

    this.$handle.on('mousedown', prxDoMouseDown); 
    this.$handle.on('mouseup', prxDoMouseUp); 
    this.$cont.on('mousemove', prxDoDrag); 
} 

這裏的小提琴：http://jsfiddle.net/8uTVJ/

我不能使用的輸入[類型=範圍。我不能使用jqueryUi。

爲什麼我的mouseup不能觸發？

Answer 1

很簡單滑塊：

我做了這個VOR自定義視頻element.but它是如此簡單，你可以把它改成任何你想要的。

function pos(e){ 
var x=e.pageX-r.offsetLeft; 
p.style.width=x+'px'; 
} 

var vc=document.getElementById('vc'), 
    r=document.createElement('div'), 
    p=document.createElement('div'), 
    mu=true;// mouseup? 

r.addEventListener('mousedown',function(e){ 
mu=false; 
pos(e); 
e.preventDefault(); 
e.stopPropagation() 
},false); 

r.addEventListener('mousemove',function(e){ 
mu||pos(e) 
},false); 

document.addEventListener('mouseup',function(e){ 
mu=true 
},false); 

vc.appendChild(r).appendChild(p); 

演示

http://jsfiddle.net/LxX34/1/

，如果您有任何問題，只是問。

多個滑塊插件

使用數據值

webkitTransform

http://jsfiddle.net/LxX34/7/

&有趣的init動畫

http://jsfiddle.net/LxX34/8/

個

&默認值

http://jsfiddle.net/LxX34/9/