Как реализовать перетаскивание?
Доброе утро.
Подскажите, как проще всего реализовать произвольное перетаскивание блоков, чтобы они менялись местами.
<!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>
|
Цитата:
https://javascript.ru/ui/draganddrop |
Цитата:
<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 |
| Часовой пояс GMT +3, время: 23:01. |