Drop and drag как переместить весь обьект по клику?

Question

Всем доброго дня) делаю dnd на чистом js. так у меня есть вот такой список

вопрос как сделать по клику плюса(красное выделение), чтобы переместилось весь синий блок?

данный момент у меня по клику само плюс перемешается а потом весь блок и это очень не красиво(((

вот код

Array.prototype.forEach.call(
    $items, node => {
      node.onmousedown = mouseDown;
      node.onmouseup = mouseUp;
    }
  );

function mouseDown(e) {
    if (hasClass(e.target, handle)) {
      $selectEl = e.target.parentNode;
      $selectEl.draggable = true;
      on($root, 'dragstart', _dragstart);
    }
  }
function _dragstart(e) {
    console.log('mouseDown', e);

    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', $selectEl.innerHTML);

    on($root, 'dragover', _onDragOver);
    on($root, 'dragend', _onDragEnd);
  }

  function _onDragOver(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    const target = e.target;
    if (target && target !== $selectEl && target.dataset.item) {
      const active = getNextElement(e, target);
      $root.insertBefore($selectEl, active);
    }
  }

Answer 1

В общем, идея такая. При нажатии на хендлер, весь элемент становится draggable = true, при завершении draggable = false.

document.querySelectorAll('.item').forEach(makeDraggable);

function makeDraggable(item) {
  item.querySelector('.handler').addEventListener('mousedown', () => item.draggable = true);
  item.addEventListener('dragend', () => item.draggable = false);
}

.item {
  width: 100px;
  height: 100px;
  border: 1px dotted gray;
}

.item .handler {
  width: 20px;
  height: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dotted blue;
}

<div class="item">
  <div class="handler">H</div>
</div>

БЛОГ НА HUSL

Drop and drag как переместить весь обьект по клику?

Ответы (1 шт):