Tuesday 25 June 2013

Using jQuery for Drag and Drop

Recently I wrote a blog on how to use drag and drop (DaD) in your APEX application. Unfortunately the javascript I used didn’t work in all browsers. I found a solution using jQuery UI. I’ve modified the code in my example application and now DaD seems to be working on all major browsers. First thing that I’ve noticed was that the draggable table cells needed to be in the same region as the droppable form cell. So I’ve made one region with both the form on the emp table and the report on the jobs table.

Then, to make the table cells draggable I had to change the classes added to the table cells. The page load dynamic action now looks as follows:

The job form cell (P8_JOB) had some classes added to it, but in this jQuery setup that was no longer necessary. I’ve removed them from the ‘HTML Form Element Attributes’. The last step was to add the draggable and droppable functions in the page header. Two jQuery libraries had to be added:

Then all table cells with class “.job ” are being made draggable and Th P8_JOB page item is made droppable to receive a draggable element, and the P8_JOB item is given the value of the job cell that is dragged into it.

The result is more robust then my previous example, since it is now supported by all major browsers (assuming that your browser is up to date). This browser compatibility can be quite a problem since when working with HTML5 and/or JavaScript. It seems jQuery is better supported then conventional JavaScript. This website can be quite helpful to find out if the HTML5 you’re trying to use is supported by your browser (kudos to Elie for bringing the side under my attention).
You can check the working example here. Again, have fun.

3 comments:

  1. Hi, Vincent.

    You've done a wonderful work here. Congrats on getting JQuery to fill-in the HTML5 gaps in IE and other browsers.

    I tried your new code in my IE9/10 and it works fine now. Plus, I like the color contrasts you've added when dragging into the form field. Easier to read and has a more professional feel.

    Thank you for taking the time and effort. There's a bunch of folks, I amongst them, who appreciate it.

    Elie

    ReplyDelete
  2. Hi Elie,

    Once more, thank you for your appreciation.

    In addition to the html5test.com website you provided, modernizr can be helpful as well. A colleague brought that tool to my attention. The tool helps you handle compatibility issues cross browsers.

    ReplyDelete
  3. Hi Vincent.

    Thanks for sharing about Modernizr. I checked out their site. I never heard of it. After skimming its features, I will definitely be making this part of my development repertoire. Thank you.

    Elie

    ReplyDelete