Переместите элемент DOM на удержание / нажмите и перетащите

Question

Переместите элемент DOM на удержание / нажмите и перетащите

1

Я пытаюсь сделать дочерний div в своих родительских измерениях, в соответствии с положением мыши над элементом. Я использовал этот ответ, чтобы определить, когда его щелкнуть и перетащить, и изменить размер 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"

natanel 10 июнь 2018, в 12:09

Источник

0

Не используйте флаги, просто прикрепите mousemove и mouseup к mousedown и отключите mouseup.
Teemu 10 июнь 2018, в 09:59

Теги:

javascript

1 ответ

Ещё вопросы

Не используйте флаги, просто прикрепите mousemove и mouseup к mousedown и отключите mouseup.

azad · Accepted Answer · 2018-06-10T07-11-00.000Z

надеюсь, что вы ищете такое решение.

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>