Integrasi SortableJS, Drawflow, dan Interact.js untuk Membangun Antarmuka Aplikasi Interaktif Berbasis Web

Integration of SortableJS, Drawflow, and Interact.js for Building Interactive Web-Based Application Interfaces

Abstract

The development of web-based user interface (UI) technology has driven the need for interactive and user-friendly applications. This study aims to explore and implement the integration of three popular JavaScript libraries—SortableJS, Drawflow, and Interact.js—to build a flexible drag-and-drop interface. With this approach, users can arrange components from a sidebar, place them into a workspace (canvas), and dynamically adjust the position and size of nodes. Experimental results show that the three libraries can be integrated without major conflicts and are capable of supporting dynamic and extensible user interfaces. This study provides a foundation for developing visual applications such as form builders, workflow editors, or interactive dashboards.