List function (retrieving all data)īasically, it just extracts the data as usual, but the SQL statement is a little different from the regular ToDo list.Īpp. The drag & drop function (SQL operations) in that order. The code for editing and deleting tasks and retrieving a single piece of data is the same as the regular ToDo list with CRUD function, so I’ll skip it. Npm i express mysql2 path body-parser util dotenv -save Only in this case, it is necessary to arrange the entire table in order of decreasing index_number, and then reassign the index_number by *1024. So sometimes, the index_number of two tasks may overlap. Thus, even if the order is changed by drag-and-drop and then reloaded, the order is preserved.Īfter dragging and dropping a task, the task’s index_number is calculated by taking the average of index_numbers of the task above and the task below. Use ORDER BY when retrieving and displaying the tableīy querying this table with “ORDER BY index_number”, you can retrieve the data in ascending order by index_number. In the above figure, for example, if you want to put “study” between “eat” and “sleep” by dragging and dropping, Once you make some data in the table, start the server up and perform drag & drop. Perform drag and drop, update index_number of dragged and dropped element This will lead you to create a database table as shown below: First, make sure that your handle icon is keyboard accessible with the Tab key this enables grabbing the draggable item via the spacebar. ![]() Set index_number = current maximum index_number + 1024 Draganddrop is traditionally a mouse or touchscreen-only interaction, but making it accessible for people that use assistive technologies is both completely possible and necessary. ![]() Fill the newly created column with dataĬase1. ![]() Then, when the task is stored in the database, it will have the number index_number in addition to the id and content. Add a column to the database to control the orderĬreate a column called index_number in the table. When you do drag and drop, you need to operate the database on the backend side in addition to the frontend side. You will see that the order of tasks will not change even after reloading.Įven after changing the order of tasks by drag & drop, the drag & drop order change is not saved when reloading. In this post, I will write about the database operations when dragging and dropping through the implementation of a to-do list. I researched what happens in the database behind the scenes when drag & drop is done and what happens to the data after the drag & drop.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |