Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.09.2018, 08:18
Интересующийся
Отправить личное сообщение для __Alex__ Посмотреть профиль Найти все сообщения от __Alex__
 
Регистрация: 18.06.2018
Сообщений: 21

Как реализовать перетаскивание?
Доброе утро.
Подскажите, как проще всего реализовать произвольное перетаскивание блоков, чтобы они менялись местами.
<!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>
Ответить с цитированием
  #2 (permalink)  
Старый 19.09.2018, 08:36
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от __Alex__
как проще всего реализовать произвольное перетаскивание блоков
Вот про то статейка...
https://javascript.ru/ui/draganddrop
Ответить с цитированием
  #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
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Боковая навигация для LandingPage как реализовать? Black_Star jQuery 4 21.02.2017 21:37
Как реализовать проверку текстового поля? Валерий1996 Общие вопросы Javascript 3 26.08.2015 13:27
Как реализовать динамичное добавление тегов modelfak23 jQuery 1 19.06.2015 14:27
Как правильно реализовать такой функционал? Julian Общие вопросы Javascript 3 16.01.2015 12:34
как реализовать связные списки? br1an jQuery 0 27.06.2013 06:11