[SOLUCIONADO] Desplazamiento horizontal por un DIV

[homeres]

Buenas a todos,

tengo una dudilla que seguro muchos sabréis como resolverla.

Quiero conseguir el efecto de moverme horizontalmente por un DIV como lo haríamos desde un móvil, me explico, en el móvil pulsaríamos con el dedo y arrastraríamos hacia derecha o hacia izquierda para desplazarnos horizontalmente, pues quiero hacer eso mismo pero con el ratón, ¿me echáis un cable por favor?

Un saludo!

[marlanga]

https://jsfiddle.net/marlanga/aqdfL4gb/2

Código Javascript:

var Scroller = function(id) {
    this.parent = document.getElementById(id);
  this.child = this.parent.firstChild;
  
  this.clicked = false;
  this.x = 0;
  
  var up = function(evt) {
    if (this.clicked) {
        this.clicked = false;
    }
  }
  
  var down = function(evt) {
    this.clicked = true;
    this.x = evt.x;
  }
  
  var move = function(evt) {
    if (this.clicked) {
        var dx = this.x - evt.x;
      this.x = evt.x;
      this.parent.scrollLeft += dx;
    }
  }
  
  this.child.addEventListener('mousedown', down.bind(this));
  this.child.addEventListener('mouseup', up.bind(this));
  this.parent.addEventListener('mouseout', up.bind(this));
  this.child.addEventListener('mousemove', move.bind(this));
}
 
var scroll = new Scroller('slider');
 

Código HTML:

<div id="slider"><div></div></div>
 

Código CSS:

div#slider {width:400px; height:100px; border: 2px solid black; overflow:hidden;}
div#slider > div {width:2000px; height:100px;background: linear-gradient(to right, #ffffff 0%,#ff0000 100%);}
 

Me he probado y me he gustado.

[homeres]

Iniciado por marlanga

[url]https://jsfiddle.net/marlanga/aqdfL4gb/2[/url]

Código Javascript:

var Scroller = function(id) {
    this.parent = document.getElementById(id);
  this.child = this.parent.firstChild;
  
  this.clicked = false;
  this.x = 0;
  
  var up = function(evt) {
    if (this.clicked) {
        this.clicked = false;
    }
  }
  
  var down = function(evt) {
    this.clicked = true;
    this.x = evt.x;
  }
  
  var move = function(evt) {
    if (this.clicked) {
        var dx = this.x - evt.x;
      this.x = evt.x;
      this.parent.scrollLeft += dx;
    }
  }
  
  this.child.addEventListener('mousedown', down.bind(this));
  this.child.addEventListener('mouseup', up.bind(this));
  this.parent.addEventListener('mouseout', up.bind(this));
  this.child.addEventListener('mousemove', move.bind(this));
}
 
var scroll = new Scroller('slider');
 

Código HTML:

<div id="slider"><div></div></div>
 

Código CSS:

div#slider {width:400px; height:100px; border: 2px solid black; overflow:hidden;}
div#slider > div {width:2000px; height:100px;background: linear-gradient(to right, #ffffff 0%,#ff0000 100%);}
 

Me he probado y me he gustado.

¡Justo lo que necesitaba! ¡Lo has clavado!

[homeres]

Solo una cosa, he probado el código pero no me funciona el javascript, no están saltando los listener... a que puede deberse?

EDITO: Faltaba el onLoad del body.... una tonteria jeje ya funciona todo, gracias de nuevo marlanga te has coronao!