Dragula — библиотека для Drag & Drop. Перетаскивание элементов (Drag and drop)

JavaScript библиотека Dragula позволяет буквально за пару строк кода настроить Drag & Drop функционал на вашем сайте. Drag & Drop — это эффект перетаскивания элементов из одной секции в другую.

В данной записи мы рассмотрим полный функционал данной библиотеки.

Подключение библиотеки Dragula

Для подключения библиотеки вам нужно скачать файлы с GitHub

Ссылка на официальный сайт — https://bevacqua.github.io/dragula/

Ссылка на GitHub — https://github.com/bevacqua/dragula

<script src='../assets/github_libs/dragula-master/dist/dragula.min.js'></script>

HTML

Для примера я создал верстку для создания воронки. У нас будут колонки и элементы которые мы можем переносить между колонками.

Класс dragWrapper используется для колонок, а класс dragableItem используется для элементовЮ при

<div class="pageWrapper">
    <div class="dragWrapper dragWrapper_1">
        <div class="dragableItem dragableItem_1">1</div>
        <div class="dragableItem dragableItem_2">2</div>
        <div class="dragableItem dragableItem_3">3</div>
        <div class="dragableItem dragableItem_4">4</div>
    </div>

    <div class="dragWrapper dragWrapper_2">
        <div class="dragableItem dragableItem_5">5</div>
        <div class="dragableItem dragableItem_6">6</div>
        <div class="dragableItem dragableItem_7">7</div>
        <div class="dragableItem dragableItem_8">8</div>
    </div>

    <div class="dragWrapper dragWrapper_3">
        <div class="dragableItem dragableItem_9">9</div>
        <div class="dragableItem dragableItem_10">10</div>
        <div class="dragableItem dragableItem_11">11</div>
        <div class="dragableItem dragableItem_12">12</div>
    </div>
</div>

CSS

В CSS я прописал простые стили + стили для создания эффекта переноса объектов.

.pageWrapper {
    display: flex;
    flex-flow: row wrap;
    column-gap: 20px;
    margin: 20px;
}
.dragWrapper {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    box-shadow: 0 0 5px #ddd;
    width: fit-content;
    padding: 20px 10px;
    border-radius: 5px;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.dragableItem {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px !important;
    height: 40px !important;
    border: 1px solid #FEDCDC;
    text-align: center;
    font-size: 20px;
    padding: 10px 20px;
    line-height: 1;
    cursor: pointer;
    background: #fafafa;
}
.dragableItem:hover {
    border: 1px solid #E45E5F;
}

Теперь пропишем стили для эффекта переноса объектов.

Класс .gu-mirror вешается на элемент который находится в движение. Для этого создаётся дополнительный элемент в конце body и прикрепляется к координатам курсора.

Класс .gu-unselectable ставится на элемент body в момент переноса элемента. С его помощью вы можете затемнить область переноса.

Класс .gu-transit вешается на область в которую, предположительно, должен переместиться элемент который мы захватили.

Класс .gu-hide это вспомогательный класс для применения display: none к элементу.

/* Dragula CSS Release 3.2.0 from: https://github.com/bevacqua/dragula */
.gu-mirror {
	position: fixed !important;
	margin: 0 !important;
	z-index: 9999 !important;
	opacity: 0.8;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
}
.gu-hide {
	display: none !important;
}
.gu-unselectable {
	-webkit-user-select: none !important;
	-moz-user-select: none !important;
	-ms-user-select: none !important;
	user-select: none !important;
}
.gu-transit {
	opacity: 0.2;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=20);
}

Простая установка Drag and Drop эффекта на сайт

В качестве первого параметра функция dragula принимает массив с элементами областей контейнеров. Все элементы помещенные в эти контейнера автоматически становятся элементами которые можно перемещать.

dragula([
    document.querySelector(".dragWrapper_1"),
    document.querySelector(".dragWrapper_2"),
    document.querySelector(".dragWrapper_3"),
]);

Настройка параметров для Drag and Drop эффекта

Вторым параметром для функции dragula можно передать объект с параметрами работы эффекта Drag and Drop.

dragula(containers, {
  moves: function (el, source, handle, sibling) {
    return true; // по умолчанию элементы всегда можно перетаскивать
  },
  accepts: function (el, target, source, sibling) {
    return true; // по умолчанию элементы могут быть помещены в любой из `контейнеров`
  },
  invalid: function (el, handle) {
    return false; // не запрещайте инициировать какие-либо перетаскивания по умолчанию
  },
  direction: 'vertical',  // Ось Y учитывается при определении того, где будет отброшен элемент
  copy: false,     // элементы перемещаются по умолчанию, а не копируются
  copySortSource: false,  // элементы в контейнерах с копией исходного кода могут быть переупорядочены
  revertOnSpill: false,  // выход за область вернет элемент туда, откуда он был перетащен, если это верно
  removeOnSpill: false,  // выход за область приведет к `удалению` элемента, если это верно
  mirrorContainer: document.body, // установите элемент, к которому добавляются зеркальные элементы
  ignoreInputTextSelection: true, // позволяет пользователям выбирать вводимый текст, подробности см. Ниже
  slideFactorX: 0, // позволяет пользователям выбирать величину перемещения по оси X, прежде чем оно будет считаться перетаскиванием вместо щелчка
  slideFactorY: 0,  // позволяет пользователям выбирать величину перемещения по оси Y, прежде чем оно будет считаться перетаскиванием, а не щелчком
});

Добавление обработчиков событий для эффекта Drag and Drop

Вы можете повесить обработчики событий для начала перетаскивания элемента, помещения блока в контейнер, выхода элемента из контейнера и прохода элемента над контейнером.

dragula([
	document.querySelector(".dragWrapper_1"),
	document.querySelector(".dragWrapper_2"),
	document.querySelector(".dragWrapper_3"),
])

.on('drag', function (el) {
	// console.log("Перетаскиваем блок")
}).on('drop', function (el) {
	// console.log("Блок помещён в контейнер")
}).on('over', function (el, container) {
	// console.log("Блок над контейнером")
}).on('out', function (el, container) {
	// console.log("Блок вышел из контейнера")
});