Показать сообщение отдельно
  #3 (permalink)  
Старый 19.09.2018, 14:19
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

Сообщение от __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
Ответить с цитированием