Сообщение от __Alex__
|
как проще всего реализовать произвольное перетаскивание блоков, чтобы они менялись местами.
|
Есть вот такое решение:
<style>
.grid {position: relative;}
.item {display: block;position: absolute;width: 200px;height: 200px;margin: 5px;line-height: 200px;z-index: 1;text-align: center;background: #000;color: #fff;}
.item.muuri-item-dragging {z-index: 3;}
.item.muuri-item-releasing {z-index: 2;}
.item.muuri-item-hidden {z-index: 0;}
.item-content {position: relative;width: 100%;height: 100%;cursor: pointer;color: #fff;background: #59687d;text-align: center;}
</style>
<div class="grid">
<div class="item">
<div class="item-content">Раз</div>
</div>
<div class="item">
<div class="item-content">Два</div>
</div>
<div class="item">
<div class="item-content">Три</div>
</div>
<div class="item">
<div class="item-content">Четыре</div>
</div>
<div class="item">
<div class="item-content">Пять</div>
</div>
<div class="item">
<div class="item-content">Шесть</div>
</div>
<div class="item">
<div class="item-content">Семь</div>
</div>
<div class="item">
<div class="item-content">
<img src="https://placebeard.it/200/200/1">
</div>
</div>
<div class="item">
<div class="item-content">
<img src="https://placebeard.it/200/200/2">
</div>
</div>
<div class="item">
<div class="item-content">
<img src="https://placebeard.it/200/200/3">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.1/web-animations.min.js"></script>
<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/muuri/0.5.4/muuri.min.js"></script>
<script>
const bloks = new Muuri('.grid', {
dragEnabled: true
});
</script>
Это библиотека muuri - там есть разные вариации.
Посмотрите вот тут оф. демки:
https://haltu.github.io/muuri/
Репозиторий и настройки:
https://github.com/haltu/muuri