Работа с событиями drag and drop

Question

Есть обычные классические карточки, структура не сложная:

<div class=‘card’ draggable="true">
   <img class=‘card__img’>
   <div class=‘card__body’>
     <p class=‘card__title’>Title</p>
     <p class=‘card__subtitle’>Subtitle</p>
   </div>
</div>

Все возможности drag and drop работают, но именно на самом div с классом card, т.е. только на родителе. Получается если пользователь тащит например за параграф или картинку, получается сбой. Сама карточка не переносится. Как отключить в карточках возможность перетягивать внутренние элементы? Нужно чтобы юзер навел мышку на карточку в любое место начал «тянуть» и событие срабатывало только на самой карточке а не на внутреннем элементе под указателем мыши.

Answer 1

Некоторые html элементы по умолчанию имею свойство draggable="true", например <a> и <img>. Если внутри карточки указать для img draggable="false", то drag event будет обрабатываться на родителе.

.card {
  background: brown;
  display: inline-block;
}

<div class="card" draggable="true">
  <h3>img draggable off</h3>
   <img class="card__img" src="https://picsum.photos/200/300" draggable="false">
   <div class="card__body">
     <p class="card__title">Title</p>
     <p class="card__subtitle">Subtitle</p>
   </div>
</div>


<div class="card card2" draggable="true">
  <h3>img draggable default</h3>
   <img class="card__img" src="https://picsum.photos/200/300">
   <div class="card__body">
     <p class="card__title">Title</p>
     <p class="card__subtitle">Subtitle</p>
   </div>
</div>

БЛОГ НА HUSL

Работа с событиями drag and drop

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