Move DOM element on hold/click and drag

Question

I'm trying to make child div move within its parent dimensions, according to mouse position over the element. I used this answer in order to identify when it's being clicked and dragged, and resize the div to the width of current position, but it doesn't work at all.

When I add click event to the parent, and calculate the offset, this works great. but how can I make it work when I "drag" the click over the element? I hope you'll understand what I try to do when you'll see the events below.

This is how it works:

var _parent = document.querySelector('div.parent');
_parent.addEventListener('click', function(e) {
    var limits = this.offsetWidth;
    var _child = this.querySelector('.child');
    var current_position = e.clientX - this.getBoundingClientRect().x;
    
    if (current_position < 0) {
      current_position = 0;
    } else if (current_position > limits) {
      current_position = limits;
    }
  
    _child.style.width = current_position + 'px';
});

.parent {
    display: block;
    width: 500px;
    background: #d6d6d6;
    overflow: hidden;
    height: 10px;
    position: relative !important;
}

.child {
    width: 0;
    display: block;
    height: 100%;
    position: absolute !important;
    background-color: #ea0707;
    cursor: pointer;
}

<div class="parent">
    <div class="child"></div>
</div>

But when I try to drag, it doesn't move:

var __FLAG__ = 0;
var _parent = document.querySelector('div.parent');
_parent.querySelector('.child').addEventListener('mousedown', function() {
    __FLAG__ = 0;
}, false); // does the "false" necessary?

_parent.querySelector('.child').addEventListener('mousemove', function() {
    __FLAG__ = 1;
}, false);

_parent.querySelector('.child').addEventListener('mouseup', function(e) {
    if (__FLAG__ === 1) {
        // Drag
        // and create "drag effect", change width while cursor moves

        var limits = this.parentElement.offsetWidth;
        var _child = this;
        var current_position = e.clientX - this.parentElement.getBoundingClientRect().x;

        if (current_position < 0) {
            current_position = 0;
        } else if (current_position > limits) {
            current_position = limits;
        }

        _child.style.width = current_position + 'px';
    }
}, false);

.parent {
    display: block;
    width: 500px;
    background: #d6d6d6;
    overflow: hidden;
    height: 10px;
    position: relative !important;
}

.child {
    width: 0;
    display: block;
    height: 100%;
    position: absolute !important;
    background-color: #ea0707;
    cursor: pointer;
}

<div class="parent">
    <div class="child"></div>    
</div>

Thank you very much for your time & help. PLEASE do not offer jQuery solutions, only "Vanilla JS"

Don't use flags, just attach mousemove and mouseup on mousedown, and detach on mouseup. — Teemu, Jun 10 '18 at 09:59

score 1 · Accepted Answer · answered Jun 10 '18 at 10:11

hope you are looking for this kind of solution.

var flag = false;
var _parent = document.querySelector('div.parent');
_parent.addEventListener('mousedown', function() {
  flag = true;
}, false); // does the "false" necessary?

_parent.addEventListener('mousemove', function(e) {

  if (flag) {
    // Drag
    // and create "drag effect", change width while cursor moves

    var limits = this.parentElement.offsetWidth;
    var _child = this.querySelector('.child');
    var current_position = e.clientX - this.parentElement.getBoundingClientRect().x;

    if (current_position < 0) {
      current_position = 0;
    } else if (current_position > limits) {
      current_position = limits;
    }

    _child.style.width = current_position + 'px';
  }

}, false);

_parent.addEventListener('mouseup', function() {

  flag = false;
}, false);

.parent {
  display: block;
  width: 500px;
  background: #d6d6d6;
  overflow: hidden;
  height: 10px;
  position: relative !important;
}

.child {
  width: 0;
  display: block;
  height: 100%;
  position: absolute !important;
  background-color: #ea0707;
  cursor: pointer;
}

<div class="parent">
  <div class="child"></div>
</div>

Move DOM element on hold/click and drag

1 Answers1