按住移动 DOM 元素/单击并拖动

Question

我正在尝试根据鼠标在元素上的位置使子 div 在其父尺寸内移动。 I used this 回答是为了识别它何时被单击和拖动，并将 div 调整为当前位置的宽度，但它根本不起作用。

当我将click 事件添加到父级并计算偏移量时，效果很好。但是当我将点击“拖动”到元素上时，我怎样才能让它工作呢？当您看到下面的事件时，希望您能理解我试图做的事情。

这就是它的工作原理：

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>

但是当我尝试拖动时，它不动：

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>

非常感谢您的时间和帮助。 请不要提供 jQuery 解决方案，只提供“Vanilla JS”

Answer 1

希望您正在寻找这种解决方案。

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>