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 ( 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 a Senior APEX Consultant with Insum Solutions, a consulting firm specialized in Oracle databases and the APEX development tool. I have worked with Oracle since 1995 and done eBusiness Suite implementations and customizations. Nowadays I specialize almost exclusively in Oracle APEX.

11 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(){

    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.

I love comments, write me a line