Skip to Main Content

Saturday, December 3, 2011

Drag & Drop tabular form rows

APEX and jQuery

Here is how drag & Drop tabular form rows to order records how you like.This solution works for tabular forms where you do not use pagination on APEX 4.1. Your table need have column that store display sequence id. If your table do not have column that can be used for this, alter your table and add column.

ALTER TABLE your_table ADD (display_seq NUMBER);

Go into the report attributes of your tabular form. On the right hand side of the page you will see Tasks. In there click Add Derived Column. Edit derived column attributes and chnage Display As to Standard Report Column. Add to Column Formatting HTML Expression:

Add to Column Formatting HTML Expression:

<img class="sort-row" src="#IMAGE_PREFIX#ws/sort.gif" alt="" />

Next uncheck all Sort checkboxes from report attributes and add order by to your report query:

ORDER BY display_seq

Create dynamic Action. Select Advanced

  • Name: Set Form Ordering
  • Event: After Refresh
  • Selection Type: Region
  • Region: {select your report region}
  • Condition: No Condition
  • Action: Execute JavaScript code
  • Fire On Page Load: True
  • Code:
     cursor: "move",
     handle: "img.sort-row",
     items: "tr:not(:first)",
     containment: ".report-standard",
     axis: "y",
     opacity: 0.9,
     revert: true,
     helper: function(e,u){
     return u;
  • Selection Type: None

Create PL/SQL process On Submit - After Computations and Validations:

  UPDATE emp SET sort_order = i WHERE rowid = APEX_APPLICATION.G_FROWID(i);

Add to page HTML Header:

<script type="text/javascript" src="#IMAGE_PREFIX#libraries/jquery-ui/1.8.14/ui/minified/jquery.ui.sortable.min.js"></script>

NOTE ! If you are on APEX 5:
Instead of adding jQuery UI library to HTML header, place below to page JavaScript file URLs


See working example.



  • Jari Laine 22 May 2021

    Hi Sunny,

    Example works with classic report and if you have created tabular form in previous version of APEX.


  • Sunny 21 May 2021

    Hi Jari,
    Thank you for the post! Will this work on Oracle Apex 20.2? I believe tabular form is retied in this version, instead we have interactive grid.
    Thank you,

  • Kinjan Bhavsar 28 Jan 2021

    Ok thanks.

  • Jari Laine 28 Jan 2021

    Hi Kinjan Bhavsar,

    Example has few issues that I haven't had time to solve.
    You need wait till I find time to finalize the example and write blog post about it. 


  • Kinjan Bhavsar 28 Jan 2021

    Hi Jari,
    I am trying same for interactive grid as you have done in your demo application.
    Can you please suggest how to create a derived column in the interactive grid and what change in JS may be required?

  • Kinjan Bhavsar 22 Jan 2021

    Thanks 😊

  • Jari Laine 22 Jan 2021

    Hi Kinjan Bhavsar ,

    No problem. Glad that this post helped you.

    One think that I noticed when you have two reports. You need also adjust parameter containment. I did that to your example also.

    containment: this.triggeringElement,

    If using CSS class as selector, containment might select first report and you can't drag row.


  • Kinjan Bhavsar 22 Jan 2021

    Thanks Jari.
    It works like a charm.
    Really appreciate your help throughout.
    Thanks once again.

  • Jari Laine 22 Jan 2021

    Hi Kinjan Bhavsar,

    If your report static id is emp_rpt, then JavaScript selector is #report_table_emp_rpt like


    If you like use dynamic action Affected Elements attributes, then set those like

    • Selection Type: jQuery Selector
    • jQuery Selector: #report_table_emp_rpt

    and change JavaSript first line to


    I changed your sample to use dynamic action Affected Elements attributes and also corrected dynamic actions When attributes


  • Kinjan Bhavsar 22 Jan 2021

    Hi Jari,
    I tried using the static id for both reports and created two dyanamic actions but it works only for first report and not the second one. Can you please check my demo app and please let me know whether am I doing anything wrong?
    workspace: xxx
    username: xxx
    password: xxx
    In that, App name APEX_DEMO and in that page number 5.
    Please let me know your thoughts.