Video: Part 4 – Implementing Drag & Drop functionality

Video: Part 4 – Implementing Drag & Drop functionality

Do you want to add Drag & Drop functionality to your APEX applications?
That’s what this video is all about.

You’ll see me working on the list created in the previous episodes (Part 1, Part 2 and Part 3) and add the necessary JS to implement.

During the video, I follow this companion blog post (rimblas.com/blog/2016/08/implementing-drag-drop-in-your-apex-applications). Bookmark it and use it as a reference in the future.

In this 41 minute video you’ll find:

  • 02:08 to 03:22 — Add the jQuery UI library to the page.
  • 03:23 to 04:40 — Explaining how elements get re-arranged.
  • 04:40 to 08:02 — Make region/report sortable.
  • 08:02 to 16:04 — Identify the elements to sort and explaining how we actually capture the new order.
  • 16:05 to 24:17 — The AJAX call to save changes (plus some debugging), wrapping up.
  • 24:18 to 42:25 — Implementing the same thing on a regular Classic Report.

Part 4: Adding Drag & Drop functionality from Jorge Rimblas on Vimeo.

* Music licensed from Envato’s AudioJungle.

Hi, I'm Jorge Rimblas. Father, husband, photographer, Oraclenerd, Oracle APEX expert, Oracle ACE, coffee lover, car guy, gadget addict, etc... I'm an APEX Tech Lead DRW. I have worked with Oracle since 1995 and done eBusiness Suite implementations and customizations. Nowadays I specialize almost exclusively in Oracle APEX.

16 Comments on “Video: Part 4 – Implementing Drag & Drop functionality

  1. Thanks for new great presentation. But “it’s easier than you think” — I think unfortunately no, not easier :) I’m sure most of apex developers couldn’t immediately reproduce this solution correctly without copy/pasting your code.

  2. I removed the call to the updateDisplaySeq function and also removed the ORDER BY clause from the SELECT statement and it also worked.

    function makeSortable(pRegionID) {
    $r = $("#report_" + pRegionID);
    $r.find("[headers='ID'] a").each(function(){
    $(this).parent().parent().attr('data-id',$(this).data("id"));
    });

    $r.find("table.t-Report-report").sortable({
    items: 'tr'
    // , update: function(event,ui) { updateDisplaySeq(); }
    , update: function(event,ui) {}
    });
    }

  3. Wow !! Just watched your video, and it is excellent !! You go into details where the devil is and that is unique…

    • I am new at Oracle Apex and I was searching for tutorials as u described with details.
      Thanks a lot.

  4. Your videos are so very helpful. Thank you so much. I expected the display seq numbers in the classic report to change after refresh but they did not seem to. Did I miss something?

  5. Hello jorge,

    I use Oracle APEX 19.1.0.00.15, I add the library #IMAGE_PREFIX#libraries/jquery-ui/1.10.4/ui/minified/jquery.ui but I had this error:
    GEThttps://lc000020.info.ratp:8443/i/libraries/jquery-ui/1.10.4/ui/minified/jquery.ui?v=19.1.0.00.15
    [HTTP/1.1 404 Not Found 18ms]

    I remove this URL to skip this error but I had a json parsing error when I drag the element list (I use the javascript function of update with the f01 and without to_string), this is the error of Json parsing:
    Error: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

    I don’t know if this error have a relation with the library not found in apex 19 server.

    Can you help me please, I need this drag and drop a lot and thanks.

    Regards,
    Rached

  6. Hello Jorge,

    I had resolved my problem, I would to thank you i learn lot of things by subscribing your videos.
    It’s really helpfull.

    Thanks.
    Rached.

  7. Genio! Muchas gracias… from Córdoba, Argentina!
    It works for me! With some little bit of modifications, but thanks to your instructions (I, almost, have not any knowledge about JS).
    In my case, var $r = $(“#report_” + pRegionID) was var $r = $(pRegionID), then I used on Link Attributes the ROWID, and at last I’d been using UPDATE_ORDER on the table, directly, updating the order in this way:
    for i in 1..apex_application.g_f01.count loop
    s := i;
    UPDATE SORTEABLE
    SET LVP_ORDEN = s-1
    WHERE ROWID = apex_application.g_f01(i)
    AND LVP_ORDEN != s-1;
    end loop;
    The REFRESH of the region do the rest.

    Thank you… very very much!

I love comments, write me a line