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>

移动DOM元素保持/单击并拖动

1 个答案: