New to sortableJS. Working on the mobile side of a Trello clone with Drag n' Drop functionality.
Drag n' Drop is working smoothly on desktop but I can't seem to find what tweaks I need to include for mobile device.
sortableJS has some mobile options that you can add like (delay, delayOnTouchOnly, touchStartThreshold, etc) just can't find what I'm looking for in regards to being able to:
- scroll horizontal thru the end of the scroll bar,
- scroll vertically thru the list-items within the lists,
- Drag n' Drop between the list,
- Drag n' Drop of list-items inside & outside of the containing list.
Here is my live app
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();
});
},
});
});
}
Any help would be greatly appreciated!
