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.

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(){
    $(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.

I love comments, write me a line