Sunday 23 June 2013

Applying Drag and Drop in an APEX Form

Today I was asked if you can use drag and drop functionality in APEX. I figured APEX shouldn’t be the problem, but I had to look into the exact implementation. In this blog I will share my findings with you.

Drag and Drop (DaD) is a HTML5 feature, like other HMTL5 features there’s nothing in APEX preventing you from using them. However, your browser must be HTML5 compatible and, in this case, support DaD. For a listing of compatible browsers check here. DaD consists of triggering- and receiving elements. An element that is dragged can trigger the following events (thanks to netmagazine):

  • dragstart: triggered when dragging a draggable element
  • drag: triggered by moving the draggable element
  • dragend: triggered by dropping the draggable element
Elements that receive draggable elements can trigger the following events:
  • dragcenter: triggered when a draggable object is dragged over an element
  • dragleave: triggered when a draggable object is dragged outside of an element
  • dragover: triggered when a draggable object is move inside an element
  • drop: triggered by dropping a draggable object.

In the following example I will show a form on the EMP table in which you can update the JOB column by dragging a job role into the JOB form field. The first step is to create a form; I chose to make a form on report. On the form page I’ve added a standard report with the various job roles that can be selected. For this example I created a table “JOBS”, which holds the various job roles.

If we want to be able to drag the various job roles, we need to make them “draggable”. Also, for further handling, I want each job/table cell to have an ID. I add them with a dynamic action that fires on page load.

The function in the dynamic action loops trough each table row of report_jobs – the ID of the JOBS report table- and adds a the following items

  • a class “job”;
  • an attribute “draggable” set to “true”, this will make it possible to drag the table cell around the screen;
  • an attribute “ondragstart” , which will trigger a function “dragJob”;
  • an ID to uniquely identify each table cell. Here the id will be set to the job role in that cell.

Next we need to tell the JOB item in the form that it can receive draggable items. To do so I’ve added the following attributes:

So now we have a report table with jobs, each job we can drag around the screen, and we have a page item that can receive a draggable element. Now to actually set the page item with the value of the dragged job, we need two functions. For simplicity I’ve added them to the page HTML header.

The first function is started as soon as you start dragging an element. The element’s id is set to the dataTransfer.

The second function is started when you drop the element in the page item and will assign the value of the dragged table cell to the page item.

And that’s about all there’s to it. To view a working example, please visit my demo application: In the interactive report click on the edit link of an employee and then in the form try to set the change the job of an employee by dragging a job from the jobs report. So as you can see, with a few simple steps you can create DaD functionality to your APEX application. Please bear in mind that your browser needs to be HTML5 compatible and that this example is simplified as an example. However, when used properly your application can benefit from DaD by making it more intuitive and interactive.
Good luck!

4 comments:

  1. Hello Vincent.

    Thank you for posting this really helpful step-by-step example of HTML5 drag-n-drop in Apex. What you've done is awesome and will be much appreciated by a lot of developers reading this blog.

    I tried your demo app. It works fine in Firefox 21.0 (I believe this is the latest incarnation). However, it does not work in IE9. I get no errors. There is simply no drag-n-drop feature. When I attempt to drag one of the job titles, say, "President", nothing is dragged.

    I then loaded your demo in IE 10.0.9 (the latest IE release). This time I am able to drag a job title to the form. However, the dragged job text simply disappears within the form field, leaving the form field empty. Whatever job text was previously in this field is gone as well. Very strange.

    I followed your link to w3schools to be sure that IE9.x is amongst the "compatible" HTML5 browsers and it is listed.

    Even stranger ...

    While in the w3schools site, I tried out the example they offer of drag-n-drop and it works fine in my IE9.x browser. But in IE10, it does not work at all. Go figure!

    Firefox, however - leastwise the version 21.0 I'm using - works fine.

    And so, is there an issue with some setting in my IE browser (version 9.x and 10.x)? Is something not right with your demo app? I just don't know.

    Hopefully, I'll figure out what is going on with IE. Perhaps it's just that IE is not as HTML5 compatible as it claims.

    All that said, I do appreciate your post. Please keep them coming.

    Elie

    ReplyDelete
    Replies
    1. Hi Elie,

      Thank you for your appreciation. I'm not sure what's going on in IE, but on debugging there seems to be an error in the dataTransfer.setData event. When dragging a table cell I get an error "Unexpected call to method or property access".
      I'll have to look into that, because for now I'm a bit clueless. Perhaps jQuery UI can be a solution, they have drag and drop functions as well.
      http://jqueryui.com/droppable/

      Delete
  2. Hi Vincent.

    You might be interested in this neat site:

    http://html5test.com/index.html

    It gives a comparison of various browsers with respect to HTML5 compatibility. According to their information, IE9 is (as I suspected) not as HTML5 compatible as it is cracked up to be. And, specifically, it does not support drag-n-drop, leastwise not all aspects of it.

    I'll be keeping this web site handy as I work with various browsers in my Apex development work (I work at Stanford's Linear Accelerator Center in CA -- we're using Apex heavily here along with Oracle 11gR2).

    Elie

    ReplyDelete
  3. Hi Elie,

    Thank you for the website, thats very helpful. In the mean time I've had some time to modify my example. This time I've used jQuery for the drag and drop. This seems to work fine in all the browsers I've tested. The changes I had to make were quite a few, so I wrote a new blog on it:
    http://vincentdeelen.blogspot.nl/2013/06/using-jquery-for-drag-and-drop.html

    Regards,
    Vincent

    ReplyDelete