Форум

__Alex__ · #1 (**permalink**) 19.09.2018, 08:18

Доброе утро.
Подскажите, как проще всего реализовать произвольное перетаскивание блоков, чтобы они менялись местами.

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            margin: 5px;
            cursor: move;
            display: inline-block;
            background-color: grey;
        }
    </style>
</head>

<body>
    <script>
        for (var i = 1; i < 22; i++) {
            document.writeln('<div id="' + i + '"></div>');
        }
    </script>

</body>

</html>

ksa · #2 (**permalink**) 19.09.2018, 08:36

Сообщение от __Alex__

как проще всего реализовать произвольное перетаскивание блоков

Вот про то статейка...
https://javascript.ru/ui/draganddrop

MC-XOBAHCK · #3 (**permalink**) 19.09.2018, 14:19

Сообщение от __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

Форум

Справочник

Discord чат

Курсы javascript