fire the div mousemove while on document

Question

Im having a slider that increases width when click-hold and moved.

But as soon as im getting my mouse outside of the slider it doesn't runs anymore.

How can i make it also run when im moving my mouse outside the slider-container ?

var classname = document.getElementsByClassName("slider-container");

const offset = function(el){
 var rect = el.getBoundingClientRect(),
  scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
  scrollTop = window.pageYOffset || document.documentElement.scrollTop;
 return {top: rect.top + scrollTop, left: rect.left + scrollLeft}
};
var mymousemove = function(e) {
    var x = e.pageX; 
    var sliderC = e.currentTarget;
    if(parseInt(sliderC.getAttribute("isMousedown")) == 1){   
      var width = e.pageX - offset(sliderC).left;
      sliderC.querySelector('.slider').style.width = width+'px';
    }
};
var mymousedown = function(e) {
   var sliderC = e.currentTarget;
   sliderC.setAttribute("isMousedown",1);
}
var mymouseup = function(e) {
   var sliderC = e.currentTarget;
   sliderC.setAttribute("isMousedown",0);
}

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('mousemove',mymousemove, false);
    classname[i].addEventListener('mousedown',mymousedown, false);
    classname[i].addEventListener('mouseup',mymouseup, false);
}

body{
  user-select: none;
}
.slider-container{
  width:200px;
  border:4px solid black;
  height:100px;
  display: inline-block;
  margin: 10px;
}
.slider{
  width:0;
  background:#f00;
  height: 100%;
}

<div class="slider-container">
<div class="slider">
</div>
</div>
<div class="slider-container">
<div class="slider">
</div>
</div>
<br />
<br />
<h1>ALSO moving mouse here while mousedown should move them sliders . nam sayin ?</h1>

https://jsfiddle.net/d8pqjb5t/3/

score 0 · Answer 1 · answered Jun 28 '17 at 12:21

You bind your mouse event listeners to the slider-container object. They do not fire anymore once you get out of the slider area.

What I would suggest is, that you bind the mousedown still to your slider-containers, but let mousemove and mouseup be handled globally. In the meantime, you cache the slider element, that was hit with the mousedown and every effect from the mousemove will be applied to that. Once you mouseup again, you delete that element from cache, so you don't get conflicted.

You can even get rid of that awkward 'isMouseDown' property.

The altered code is here:

var classname = document.getElementsByClassName("slider-container");

const offset = function(el){
  var rect = el.getBoundingClientRect(),
  scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
  scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  return {top: rect.top + scrollTop, left: rect.left + scrollLeft}
};

var mymousemove = function(e) {
  if (currentSlider) {
    var x = e.pageX; 

    var width = e.pageX - offset(currentSlider).left;
    if (width < 0) width = 0;
    if (width > 200) width = 200;
    currentSlider.querySelector('.slider').style.width = width+'px';
  }
};
var currentSlider;
var mymousedown = function(e) {
  currentSlider = e.currentTarget;
}
var mymouseup = function(e) {
  if (currentSlider) {
    currentSlider = null;
  }
}

for (var i = 0; i < classname.length; i++) {
  classname[i].addEventListener('mousedown',mymousedown, false);
}
document.addEventListener('mousemove',mymousemove, false);
document.addEventListener('mouseup',mymouseup, false);

The updated fiddle can be found here.

Since now, the mouse pointer could be anywhere to the screen, you have to limit the width your inner container could be set to.

I did this hardcoded from 0 to 200, the size range of your slider-container, but this can of course be done more dynamically.

Chiller · Accepted Answer · 2017-06-28T12:57:09.233

I changed a few things in your code, basically i added an event listener on the document to achieve what you want

See code snippet:

var classname = document.getElementsByClassName("slider-container");

const offset = function(el) {
  var rect = el.getBoundingClientRect(),
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  return {
    top: rect.top + scrollTop,
    left: rect.left + scrollLeft
  }
};

var mymousedown = function(e) {
  var sliderC = e.currentTarget;
  sliderC.setAttribute("isMousedown", 1);

  document.addEventListener('mousemove', function() {
    var e = window.event;
    var x = e.clientX;
    if (parseInt(sliderC.getAttribute("isMousedown")) == 1) {
      var width = e.clientX - offset(sliderC).left;
      sliderC.querySelector('.slider').style.width = width + 'px';
    }
  }, false);

  document.addEventListener('mouseup', function() {
    sliderC.setAttribute("isMousedown", 0);
  }, false);
}

for (var i = 0; i < classname.length; i++) {
  classname[i].addEventListener('mousedown', mymousedown, false);
}

body {
  user-select: none;
}

.slider-container {
  width: 200px;
  border: 4px solid black;
  height: 100px;
  display: inline-block;
  margin: 10px;
}

.slider {
  width: 0;
  background: #f00;
  height: 100%;
  max-width: 100%;
}

<div class="slider-container">
  <div class="slider">
  </div>
</div>
<div class="slider-container">
  <div class="slider">
  </div>
</div>
<br />
<br />
<h1>ALSO moving mouse here while mousedown should move them sliders . nam sayin ?</h1>

fire the div mousemove while on document

2 Answers2

Linked