Блин, что то я запутался и нахожусь в самом начале.
Если кто то сможет посмотреть и подсказать, то у меня такой макет HTML:
<style>.skates{display:flex;flex-wrap:wrap;justify-content:flex-start}.skat-size{display:flex;flex-direction:column;flex-basis:215px;margin:15px 3px 15px;padding:0 1px 1px;border:solid 1px #ccc;max-width:212px}.skat-size:hover .skat__btn{opacity:0.4}.skat-size .skat__btn:hover{opacity:1;cursor:all-scroll}.dragPanel{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='18' viewBox='0 0 10 18'%3E%3Cpath fill='%23010202' d='M4 5H0V1h4v4zm6-4H6v4h4V1zM4 7H0v4h4V7zm6 0H6v4h4V7zm-6 6H0v4h4v-4zm6 0H6v4h4v-4z'/%3E%3C/svg%3E");width:10px;height:18px;margin-left:5px}.skat__panel{height:21px}.skat__btn{display:inline-block;opacity:0;margin-top:3px}</style>
<div class="skates">
<div class="skat-size">
<div class="skat__panel">
<div class="dragPanel skat__btn" title="Переместить"></div>
</div>
<div class="skat-params"><h4>Блок 1</h4></div>
</div>
<div class="skat-size">
<div class="skat__panel">
<div class="dragPanel skat__btn" title="Переместить"></div>
</div>
<div class="skat-params"><h4>Блок 2</h4></div>
</div>
<div class="skat-size">
<div class="skat__panel">
<div class="dragPanel skat__btn" title="Переместить"></div>
</div>
<div class="skat-params"><h4>Блок 3</h4></div>
</div>
</div>
Три однотипных блока, при наведении на блок - появляется область-элемент для перетаскивания.
Эти блоки генерируются через class, поэтому события отслеживаю по event.target.
Если я правильно понял, первым делом при нажатой кнопке мыши добавляю для блока атрибут draggable="true". Получается такое начало JS:
// Перетаскивание [url]https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API[/url]
document.querySelector('.skates').addEventListener('mousedown', function(e) {
let el = event.target;
if (el.className == 'dragPanel skat__btn') {
el.parentNode.parentNode.setAttribute('draggable', true);
document.querySelector('.skates').addEventListener('mouseup', function (e) {
console.log('Отпустил кнопку');
})
}
})
А что делать дальше? То ли собирать DataTransferItemList и создавать DataTransferItem??? - я потерялся. Может кто поможет.
