0

Как можно реализовать на чистом JS перетаскивание всего родительского контейнера при взаимодействии с дочерним элементом внутри этого родителя?

Само перетаскивание уже сделано и работает (на родителе стоит draggable=true и обработчики, на детях draggable=false)

Если поставить draggable=true на требуемый элемент, а на родителя draggable=false, то перетаскивание работает, но визуально перетаскивается только этот элемент.

<div class="wrapper">
  <div class="parrent" id="parrentID">
    Parrent
    <!-- родитель, наверное, должен быть draggable=false. При попытке перетащить блок за родителя, ничего не должно происходить-->
    <div class="draggable" draggable=false>
      Draggable
      <!-- ребенок, наверное, должен быть draggable=true. За него и нужно перетаскивать весь блок родителя-->
      <div class="draggable-child" draggable=true>
        Draggable child
      </div>
    </div>
  </div>
  <div class="droppable">
    Droppable
  </div>
</div>
1
  • Необходим воспроизводимый пример. Без него никто не сможет вам помочь. 20 янв 2020 в 12:55

1 ответ 1

1

Как-то так

//Розовый
let draggable = document.querySelector(".draggable");

//Зеленый
let droppable = document.querySelector(".droppable");

//Обработчик события начала перетаскивания
draggable.ondragstart = (e) => {
  //определяем родителя
  let parrent = e.currentTarget.parentElement;
  //передаем ID родителя
  e.dataTransfer.setData('id', parrent.getAttribute("id"));
}

//Отмена дефолтных реакци на перетаскивание к дропу.
droppable.ondragover = (e) => {
  e.preventDefault();
}

//Событие на дроп айтема
droppable.ondrop = (e) => {
  //извлекаем ID родителя и находим его.
  let item = document.getElementById(e.dataTransfer.getData('id'));
  //применяем родителя к дропу
  e.currentTarget.append(item)
}
.wrapper {
  display: flex;
}

.parrent {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  background: lightblue;
}

.draggable {
  background: pink;
  width: 100px;
  height: 100px;
}

.droppable {
  min-width: 300px;
  min-height: 300px;
  background: lightgreen;
}
<div class="wrapper">
  <div class="parrent" id="parrentID">
    Parrent
    <div class="draggable" draggable=true>
      Draggable
    </div>
  </div>
  <div class="droppable">
    Droppable
  </div>
</div>

4
  • Спасибо, конечно, за такой подробный ответ, но вопрос был в том, как сделать этот drag-n-drop для элемента, у которого есть дочерний элемент. И вот за этот элемент мне и нужно как за ручку перетащить весь родительский элемент. Но я без понятия, как это сделать
    – Oleksandr
    20 янв 2020 в 20:44
  • @IrinaIvanova функционал повторяет формулировку вашего вопроса. Давайте попробуем иначе. Есть 3 элемента. 1 - родитель. 2 - ребенок, 3 - дроп(то куда перетаскиваем). Из вашей формулировки следует, если перетаскиваешь ребенка в дроп, то за ним должен перетаскиваться в дроп и родитель. Если я не прав, то поправьте меня, а лучше в шапке сделайте хотя бы базовую разметку, в которой указать родителя, ребенка, кого перетаскиваем, куда перетаскиваем.
    – xydope
    20 янв 2020 в 21:23
  • я добавила в свой вопрос разметку на основе вашей с комментариями
    – Oleksandr
    21 янв 2020 в 8:59
  • @IrinaIvanova Посмотрите пример того, что вам надо (с визуальным перетаскиванием родителя) stackoverflow.com/questions/10691281/…
    – xydope
    21 янв 2020 в 11:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.