About This Article
This article is generated using an automated workflow powered by generative AI. It uses mock data and browser operations to explore the use cases, mechanisms, and troubleshooting observation points of SortableJS. No access to real services or personal information is performed.
Verification Status:Based on reviews conducted up to 2026-10-30, official documentation and fixed sources of saved Daily Code were cross-referenced, and Node.js syntax check results were recorded. Actual browser operations, rendering, and CDN responses are unverified. Screen descriptions represent expected behavior from the code and are distinguished from actual measurements.
| Item | Description |
|---|---|
| Target | Modern browsers such as Chrome, Edge, and Firefox (hardware compatibility unverified) |
| Library Used | SortableJS (Tutorial version: 1.15.6) |
| Cost | No paid API required for the demo source itself. Communication fees and usage conditions depend on the environment. |
| Data | In-page mock data. No authentication credentials, location information, or corporate data required. |
| Learning Operation | Move task cards to completion via drag-and-drop or buttons |
- Why Try This Technology
- Try it first: Live demo and expected results
- How it works: Decoding the API
- Compare by changing only one condition
- Where to look when it fails
- Application to Business and Learning
- Comparison with Alternative Methods
- GitHub Samples
- Official and Primary Sources
- Supplementary Information on Verification Scope
Why Try This Technology
While task lists can be created in Excel tables, card-based interfaces are useful when you want to intuitively move tasks around to prioritize upcoming work. SortableJS is a library that easily adds drag-and-drop reordering to elements. However, the movement of a card does not automatically mean the work status is saved on the server. In this tutorial, we will build a small Kanban board that only manipulates the browser DOM, intentionally separating "visual state" from "data persistence".
When building a working sample, rather than just confirming that the UI changed visually, you need to distinguish which input modified which variable and which process updated the rendering. In this learning material, those changes are explicitly shown on the screen. When integrating into an actual service, design the authentication and data persistence processes separately.
Try it first: Live demo and expected results
The initial display has 2 items under "In Progress": "🔍 Research" and "🧪 Test", and 1 item under "Done": "✅ Plan". When initialized normally, the status field is expected to be displayed asSUCCESS: 未着手 2 / 完了 1When you click "Move top item to done" once, "🔍 Research" moves and it becomesSUCCESS: 未着手 1 / 完了 2and the second click moves "🧪 Test" and it is expected to becomeSUCCESS: 未着手 0 / 完了 3On the third click, there are no items to move, and the count remains unchanged. The item counts are also updated when dragging cards between columns. Reordering items vertically within the same column does not change the counts. Reloading the page is expected to revert it to the initial state because neither localStorage nor a backend is implemented.
Things to check before operation
Verify that your computer can execute JavaScript. Administrator privileges are not required.
Prepare to open the browser developer tools to check for errors in the Console and CDN fetch failures in the Network tab.
If the demo is not published, save the
docs/demos/sortablejs-kanban/andindex.htmlfrom within the above into the same folder.app.jsThe where the README is located does not contain the two execution files.web/sortablejs-kanban/Navigate to that saved folder in the terminal and run on Windows,py -3 -m http.server 8000 --bind 127.0.0.1or on Linux/macOS.python3 -m http.server 8000 --bind 127.0.0.1In the browser,http://127.0.0.1:8000/and press Ctrl+C in the terminal to exit. If Python is not available, another local HTTP server is required.initial
SUCCESSAfter confirming 2 items / 1 item, press the button once and then again to record the count.SUCCESSonly indicates that the initialization process has been reached, and does not guarantee successful execution of dragging or CDN delivery on actual devices. Please verify separately whether the cards actually move in the browser.
Overview of the mechanism
flowchart LR
A["入力やクリック"] --> B["イベントを受ける"]
B --> C["SortableJS のAPI"]
C --> D["状態と描画を更新"]
D --> E["見た目と文字で確認"]
This diagram is a conceptual illustration for learning purposes and does not represent the internal implementation of the browser or details of network communication. It is common for libraries to track "which variable receives the operation" regardless of what is used.
How it works: Decoding the API
Applying Sortable.create to column elements allows you to reorder cards within a column by dragging them. If two columns specify a common group via the group option, moving items across columns is also permitted. In onEnd after the move, the number of child elements in each column is recounted and reflected in the screen count. Here, even if the top card moves, the text or identifier of the original card is not automatically rewritten. Counting only the visual appearance when multiple cards are present is sufficient for learning purposes, but in actual practice, cards must have immutable task IDs.
How to read the minimal code
for (const el of [todo, done]) {
Sortable.create(el, { group: 'tasks', animation: 160, onEnd: update });
}
The above is an excerpt from the actualapp.jswith its structure preserved for readability.todoanddoneare elements obtained bydocument.querySelectorin the preceding stage, andupdateis a function that redisplays the count. This is not a standalone executable complete file.The HTML and implementation files are located indocs/demos/sortablejs-kanban/of Daily Code.onEndcallsupdatewhen the drag operation is completed. Meanwhile, button operationsdone.append(todo.firstElementChild)afterupdate()is called directly.
Compare by changing only one condition
When used in production, you can design a mechanism that reads the card ID, destination column, and order from the onEnd event and saves them via an API. However, success must not be displayed immediately when the event occurs. If the server rejects the save, you must either revert the card to its original position or clearly indicate that it is unsaved. You also need to determine as a requirement whether movement should be allowed when the network is disconnected or if an online connection is required.
First,app.js'sanimation:160theanimation:0toonly at one placechange, reload the page, and compare the drag movement animations. Both item counts are expected to start at 2/1, and become 1/2 when a card is moved between columns.animationis an animation setting in milliseconds and is not a setting to change the card storage location or item count. Please revert it to 160 after comparison. The browser operation results have not yet been actually measured.
Where to look when it fails
Drag operations alone do not allow keyboard users to move tasks. The sample only providesa button to send the first unstarted item to completedand notifies the progress count withrole="status"Selection of arbitrary cards, moving from completed to unstarted, keyboard reordering, and undoing are not implemented, so this cannot be called fully accessible. In actual services, implement and test separately, including focus management. Also, avoid designing task IDs based directly on DOM text, as it becomes ambiguous the moment tasks with the same name appear.
| Observed state | Points to isolate | Example of countermeasures |
|---|---|---|
| Screen does not change from initial state | Script acquisition, initialization, and event registration | Check Console, Network, and script tags |
| The display changes, but the meaning is incorrect | Input values, arrays, units, and update targets | Fix the value and check one condition at a time |
| Button cannot be clicked | Selector and DOM generation order | Check HTML to ensure IDs match |
| Fails only on specific devices | Browser features, permissions, CDN, and performance | Record the device and version, along with reproduction steps |
Errors within the browser differ from public web server failures. Investigate the former using developer tool error details, and the latter using HTTP responses and asset delivery conditions. Refraining from labeling unknown failures as successes enhances the reliability of technical notes.
Application to Business and Learning
This can be applied to incident response progress management, draft editing stages, sample review queues, and lightweight teamwork. In operations requiring audit trails, recording not only the browser's DOM but also the updater, update timestamp, and pre/post-changes on the server is essential. Being mindful of the boundary between visual presentation and business requirements is the practical takeaway from this small demo.
Decisions Before Implementation
When publishing to readers, determine where the displayed data comes from, who can modify it, the types of information retained on the screen, and the verification items for library updates. This demo includes neither login nor server persistence. Therefore, before adding operational features, we recommend first distinguishing between the "minimum functional part that displays as expected" and the "part requiring operational reliability, permissions, and backups." Since third-party CDNs involve external communication, prior verification is required to ensure compliance with corporate network policies.
Comparison with Alternative Methods
| Method | Suitable Scenario | Precautions |
|---|---|---|
| SortableJS | Scenarios suited for the purpose, such as moving task cards to completed via drag-and-drop or a button | Requires dependency library updates and license management |
| Browser standard API | Building small features in-house | Manually verifying specifications and compatibility |
| Static images and tables | Explanations requiring no user interaction | State changes cannot be experienced in real time |
Libraries are tools to be chosen when needed. Compare what you want to achieve against the learning curve. Avoiding the mindset of 'just adding a library' makes smaller pages easier to maintain.
GitHub Samples
The blog post focuses on background and concepts, while Daily Code provides executable and modifiable code, separating their roles. APIs for posting and saving to external services are not included.
Official and Primary Sources
Reviewed Reference Scope:On 2026-10-30, we re-verified the official SortableJS README section forgroup/onEndand the MDN documentation regarding drag interactions and keyboard fallback descriptions. Actual CDN asset loading and browser interactions were not verified.
Supplementary Information on Verification Scope
You can refer to the pinned Daily Code commit and the existing Node.js syntax inspection results. However, actual browser rendering, library CDN responsiveness, and operation across all devices have not been verified. Please verify actual behavior in your own environment using the Console and Network tabs.
