Новый для сортируемый JS. Работая на мобильной стороне клона Trello с функциональностью Drag n 'Drop.
Drag n' Drop работает без проблем на рабочем столе, но я не могу найти, какие настройки мне нужны включить для мобильного устройства.
сортируемый JS имеет несколько мобильных параметров, которые можно добавить, например (delay, delayOnTouchOnly, touchStartThreshold, et c), просто можно не могу найти то, что мне нужно в отношении возможности:
- прокрутки по горизонтали до конца полосы прокрутки,
- прокрутки по вертикали через элементы списка в пределах списки,
- Drag n 'Drop между списками,
- Drag 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();
});
},
});
});
}
Любая помощь будет принята с благодарностью!