I recently managed to set up sortable lists in a screen using the JQuery library. In this screen I'm able to drag an item from the parent box on the right to one of the boxes on the left (the number of total boxes on the left are variable). Considering that each box is a separated ListRecord, I wish to integrate the visual interface changes with the database.

I've set all ListRecords with a css class called ".sortable" and connected them using the .sortable() methods from the JQuery library. I'm able to identify the text of the most recent moved item using javascript, but I'm having trouble with identifying which ListRecords need to be changed in order to reflect the visual change on the database. i.e. if I move an item from the right box to the top-left box, I need to remove the corresponding item from the original list and add it to the destination one. What is the easiest way to do this? I've been trying to mess with the ListRecords extended properties (trying to use JQuery's events "receive" and "remove") but it doesn't work.

Does anyone have suggestions?


Do the list records have as source an aggregate?

If that is the case you would need to do whatever to reflect the drag and drop action in your data, then do a refresh data of the listrecords you drag from and the listrecords you dragged too. After that you need to do an Ajax refresh of both record lists.

if the listrecords source are local list parameters, then instead of updating the entities to reflect the drag and drop action you can use the system list server actions to append an item to s list and to remove an item from a list. After that you need to do an Ajax refresh of both record.