Home > Forum > User Voice > List's order change by dragging.

List's order change by dragging.
4

MVP

Hi Karol

Until WEBCON does implement this super cool feature, you might be able to use my approach.

We had this requirement for one of our projects.
I used jQuery sortable https://jqueryui.com/sortable/ and a technical field on the itemlist that tracks the sort order.

What I'm doing is, waiting for the itemlist to be rendered, then I'm applying the sortable extension with a function which is setting the sort order on the technical field.

function waitForElm(selector) {
return new Promise(resolve => {
if (document.querySelector(selector)) {
return resolve(document.querySelector(selector));
}

const observer = new MutationObserver(mutations => {
if (document.querySelector(selector)) {
resolve(document.querySelector(selector));
observer.disconnect();
}
});

observer.observe(document.body, {
childList: true,
subtree: true
});
});
}

waitForElm("#SubElems_#{WFCON:483}# .table tbody").then((elem) => {
$(elem).sortable({
cursor: 'move',
axis: 'y',
stop: function(e, ui) {
changeSortorder();
}});
});

function changeSortorder() {
$(".subelem-row").each(function(index) {
var row = $(this).attr("data-index");
console.log(row);
if (row == undefined) { return;}
SetSubTypedValue(#{WFCON:483}#, row, '#{SFLD:23}#', { value: index + 1 });
})
}

We will have to find a solution when migrating to 2023 (cash instead of jquery) :(