&nbsp; &nbsp; In our lives, we all have at least once used applications that support us in working and studying more effectively. The best example here that most people know is the todolist application. An app that helps us create todolists is a list of tasks that need to be completed in a day/week/month... arranged in a certain order. In other words, Todolist is like a plan drawn up to reach your desired goal. Once you have a clear todolist, you will focus on performing the tasks and avoid wasting time on distractions around, meeting the set schedule.&nbsp; &nbsp;Most todolist apps will let you drag and drop tasks within them. This will help users easily arrange the tasks in the todolist in the order they want. At this point, have you ever wondered how todolist applications implement these sorting features. During the development of our company's todolist application (ABC Software Solutions), I was tasked with adding this sorting feature to our todolist application. So in this article I will share how I solved this problem.&nbsp; &nbsp;Unlike other sorting problems, they have built-in attributes for sorting, for example, the problem of sorting products by ascending price on e-commerce sites, they already have an attribute that is product price. to sort. In our sorting problem there are not any properties to sort, so to sort them the first thing we need to do is choose an attribute to sort. And the two most commonly used attributes are "order" and "index".&nbsp; &nbsp;&nbsp;Order &nbsp; &nbsp; In this way, the created tasks will have an additional order attribute. When a task is created, their order value will be equal to the number of existing tasks in the todolist array (todolist.tasks.length).<pre><code class="language-typescript">Const order = todo list.tasks.length;</code></pre> &nbsp; &nbsp; It can be understood simply: the first task created will have an order value of 0, the second task will have an order value of 1, the nth task will have an order value of n-1. If the tasks are adjacent, their order values ​​will be different. 1.&nbsp;<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/The_problem_of_reorder_task_in_todolist_1_718a1c21e5.png" alt="The_problem_of_reorder_task_in todolist_1.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_The_problem_of_reorder_task_in_todolist_1_718a1c21e5.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_The_problem_of_reorder_task_in_todolist_1_718a1c21e5.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_The_problem_of_reorder_task_in_todolist_1_718a1c21e5.png 750w," sizes="100vw">&nbsp; &nbsp; When we change the position (by dragging and dropping) of task 2 (order:1) &nbsp;to the first position (order:0), we only need to update the order value of the 2 tasks. order value of task 1 to 1 and order value of task 2 to 0.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/The_problem_of_reorder_task_in_todolist_2_fec48d5822.png" alt="The_problem_of_reorder_task_in todolist_2.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_The_problem_of_reorder_task_in_todolist_2_fec48d5822.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_The_problem_of_reorder_task_in_todolist_2_fec48d5822.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_The_problem_of_reorder_task_in_todolist_2_fec48d5822.png 750w," sizes="100vw">&nbsp; &nbsp; But when we change the position of task 3 to the first position (order: 0) then we need to update the order 3 task value again.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/The_problem_of_reorder_task_in_todolist_3_88560ad1fa.png" alt="The_problem_of_reorder_task_in todolist_3.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_The_problem_of_reorder_task_in_todolist_3_88560ad1fa.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_The_problem_of_reorder_task_in_todolist_3_88560ad1fa.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_The_problem_of_reorder_task_in_todolist_3_88560ad1fa.png 750w," sizes="100vw">&nbsp; &nbsp; And from that we see &nbsp; when we update the value of the task with order n to a new position with order n1, we have to update |n-1|+1 task again. Think if you move the 10th task (order:10) to the first position (order:0) then you have to update 11 tasks again this is terrible it creates a huge pressure on the database.&nbsp; &nbsp;&nbsp;Index&nbsp; &nbsp;&nbsp;In this way, the created tasks will have an additional index. When a task is created, their index value will be equal to the number of existing tasks in the todolist array (todolist.tasks.length) plus one and multiply by a fixed value (indexStep).<pre><code class="language-typescript">Const index = (todolist.tasks.length+1) * indexStep.</code></pre>&nbsp; &nbsp; It can be understood simply: the first task created will have an index value of indexStep, the second task will have an index value of 2*indexStep, the nth task will have an index value of n*indexStep. If the tasks are adjacent, their order value will be different from each other in indexStep.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/The_problem_of_reorder_task_in_todolist_4_cb7a54bb80.png" alt="The_problem_of_reorder_task_in todolist_4.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_The_problem_of_reorder_task_in_todolist_4_cb7a54bb80.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_The_problem_of_reorder_task_in_todolist_4_cb7a54bb80.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_The_problem_of_reorder_task_in_todolist_4_cb7a54bb80.png 750w," sizes="100vw">&nbsp; &nbsp; When we change the position of a task within the task, we just need to update the task so that the index of that task is greater than the task above it and less than the task below it in the new position (indexUp &lt; indexNew &lt; indexDown).&nbsp; &nbsp; For example, change the position of task 3 between task 1 and task 2.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/The_problem_of_reorder_task_in_todolist_5_eea91e4a93.png" alt="The_problem_of_reorder_task_in todolist_5.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_The_problem_of_reorder_task_in_todolist_5_eea91e4a93.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_The_problem_of_reorder_task_in_todolist_5_eea91e4a93.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_The_problem_of_reorder_task_in_todolist_5_eea91e4a93.png 750w," sizes="100vw">&nbsp; &nbsp; In case the new position is the highest, the task above it will not exist, so its index (indexUp) also does not exist. Then set the value of that index to 0, everything will still work fine.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/The_problem_of_reorder_task_in_todolist_6_d0524bc75a.png" alt="The_problem_of_reorder_task_in todolist_6.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_The_problem_of_reorder_task_in_todolist_6_d0524bc75a.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_The_problem_of_reorder_task_in_todolist_6_d0524bc75a.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_The_problem_of_reorder_task_in_todolist_6_d0524bc75a.png 750w," sizes="100vw">&nbsp; &nbsp; Similar to the case where the new position is the lowest, the task below it will not exist, so its index (indexDown) does not exist. Then we just need to set the value of that index as (n+1)*indexStep.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/The_problem_of_reorder_task_in_todolist_7_14ee193d8a.png" alt="The_problem_of_reorder_task_in todolist_7.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_The_problem_of_reorder_task_in_todolist_7_14ee193d8a.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_The_problem_of_reorder_task_in_todolist_7_14ee193d8a.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_The_problem_of_reorder_task_in_todolist_7_14ee193d8a.png 750w," sizes="100vw">&nbsp; &nbsp; From the examples above, you probably also failed with "index" that only updates a single task. Therefore in terms of performance it will be better than "order". However, this approach still has a fatal drawback. When we change positions many times, at some point the index difference between two adjacent tasks is too small (0 or 1). This will cause the new index (indexNew) of the task to change position, not satisfying the condition so that the todolist is sorted according to our wishes (indexUp &lt; indexNew &lt; indexDown).<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/The_problem_of_reorder_task_in_todolist_8_1568260d35.png" alt="The_problem_of_reorder_task_in todolist_8.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_The_problem_of_reorder_task_in_todolist_8_1568260d35.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_The_problem_of_reorder_task_in_todolist_8_1568260d35.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_The_problem_of_reorder_task_in_todolist_8_1568260d35.png 750w," sizes="100vw">&nbsp; &nbsp; But there is still a way to solve this problem. During index update we only need to check the difference between the index of the task above it and the index of the task below it, if it is less than some threshold (eg 50 or 100) after updating the new index we will &nbsp;perform index reset of all tasks in that todolist. If you ask how to reset the index, we just have to create their index in their order &nbsp;multiplied by indexStep. For example, the first task will be indexed as indexStep, the index of the second task will be 2*indexStep, the index of the nth task will be n*indexStep.&nbsp; &nbsp; So in this blog post I show how I used to change the position of a task in the todolist. This blog post is over. I'm not good at writing, so the article may have some shortcomings, please ignore. Thank you for reading it. See you on the next blog post.

This blog talks about how to reorder task in todolist

Algorithm

Contact Us