Перезаписывается document.onmousedown ?
Как обойти тогда?
update
-----------------
Действительно. Решил это так. Чтоб тема даром не висела, расскажите, что я сделал вообще криво и не так?
<!DOCTYPE html>
<style>
body {
padding-left: 40px;
}
#knobId {
background-color: #7f9;
}
</style>
<body>
<div id='sl1'></div>
<div id='sl2'></div>
<div id='sl3'></div>
</body>
<script type="text/javascript">
function addSlider(width, sliderId) {
var sliderWidth = width;
var slider = document.createElement('div')
slider.id = sliderId + '_sliderId';
slider.style.width= sliderWidth + 'px';
slider.style.height= 15 + 'px';
slider.style.border = '3px solid #777';
slider.style.position = 'relative';
document.getElementById(sliderId).appendChild(slider);
var knob = document.createElement('div');
knob.id = sliderId +'_knobId'
knob.className= 'knob'
knob.style.width = 24 +'px';
knob.style.height = 15+ 'px';
knob.style.border= '3px solid black';
knob.style.position = 'relative';
knob.style.top= -3 +'px';
knob.style.left = 0 + 'px';
slider.appendChild(knob);
function setValue(x) {
knob.style.left = x + 'px';
};
knob.addEventListener('mousedown', startListen, true)
var start;
var end;
var path;
document.getElementById(sliderId).onmousedown = mouseClick;
function mouseClick(event){
start = event.pageX
}
document.getElementById(sliderId).onmousemove = mouseUp;
function mouseUp(event){
end = event.pageX
path = end-start
}
var pos;
function startListen(e) {
pos = parseInt(knob.style.left, 10)
slider.addEventListener('mousemove', changeKnobPos, true);
};
function changeKnobPos(e) {
console.log(sliderId+" "+ path +" "+ pos)
if (pos + path +29 < sliderWidth && pos + path >=0 ){
knob.style.left = pos + path +'px';
}
}
document.addEventListener('mouseup', endListen, true)
function endListen() {
slider.removeEventListener('mousemove', changeKnobPos, true);
}
this.getValue= function() {return parseInt(knob.style.left, 10)};
this.setValue= function(x) {knob.style.left = x + 'px'};
}
var bb = new addSlider(300, 'sl1');
var gg = new addSlider(400, 'sl2');
var ff = new addSlider(500, 'sl3');
</script>