Впервые в sortableJS. Работа над мобильной стороной клона Trello с функцией Drag n 'Drop.
Drag n 'Drop работает плавно на рабочем столе, но я не могу найти, какие настройки мне нужно добавить для мобильного устройства.
sortableJS имеет некоторые мобильные параметры, которые вы можете добавить, например (delay
, delayOnTouchOnly
, touchStartThreshold
и т. д.), просто можете ' Я не нашел то, что ищу в отношении возможности:
- прокрутите горизонтально до конца полосы прокрутки,
- прокрутите вертикально по элементам списков в списках,
- Перетащите n 'Drop между списком,
- Перетащите n 'Drop элементов списка внутри и за пределы содержащего списка.
Вот мое живое приложение
function makeSortable() {
Sortable.create($boardContainer[0], {
filter: ".add",
animation: 150,
ghostClass: "ghost",
easing: "cubic-bezier(0.785, 0.135, 0.15, 0.86)",
onMove: function (event) {
let shouldMove = !$(event.related).hasClass("add");
return shouldMove;
},
onEnd: function (event) {
let { id, position } = $(event.item).data();
let newPosition = event.newIndex + 1;
if (position === newPosition) {
return;
}
$.ajax({
url: `/api/lists/${id}`,
data: {
position: newPosition,
},
method: "PUT",
}).then(function () {
init();
});
},
});
$(".list > ul").each(function (index, element) {
Sortable.create(element, {
animation: 150,
ghostClass: "ghost",
easing: "cubic-bezier(0.785, 0.135, 0.15, 0.86)",
group: "shared",
onEnd: function (event) {
let { id, position, list_id } = $(event.item).find("button").data();
let newPosition = event.newIndex + 1;
let newListId = $(event.item).parents(".list").data("id");
if (position === newPosition && list_id === newListId) {
return;
}
$.ajax({
url: `/api/cards/${id}`,
method: "PUT",
data: {
list_id: newListId,
position: newPosition,
},
}).then(function () {
init();
});
},
});
});
}
Любая помощь будет принята с благодарностью!