Drag and Drop in Classic Report using JS in Oracle APEX

Introduction

In this blog, we will explore how to implement a drag-and-drop feature in a Classic Report in Oracle APEX. This allows users to reorder rows dynamically and update the database with the new sequence.

Steps to Implement Drag and Drop

1. Create the Classic Report (Drag & Drop)

Use the following SQL query to create a Classic Report based on the NAME_LIST table:

2. Modify the Column Settings

• Set Static ID of the Classic Report to dragReport.

• In the ID Column, change the Type to Link.

• Set Target Type to URL and enter javascript:void(0);.

3. Create a Dynamic Action

• Event: After Refresh

• Selection Type: Region

• Region: Drag & Drop

• Action: Execute JavaScript Code

• Code:

  
  
  

4. Add JavaScript for Drag-and-Drop

    Go to Function and Global Variable Declaration in APEX and add the following JavaScript:

5. Create an AJAX Callback

• Name: UPDATE_ORDER

• PL/SQL Code:

Conclusion

By integrating drag-and-drop functionality into a Classic Report, you can significantly enhance user experience and simplify data management. This feature enables users to effortlessly reorder rows, ensuring that the updated sequence is seamlessly stored in the database.

This approach is useful for task management, priority setting, and custom sorting within APEX applications.

Stay curious, keep experimenting, and continue building great applications with Oracle APEX! 🚀

References

• Jorge Rimblas. Implementing Drag & Drop in your APEX applications. Available at: https://rimblas.com/blog/2016/08/implementing-drag-drop-in-your-apex-applications/