Skip to main content
Known Participant
June 11, 2009
Question

Processing drag and drop functionality.

  • June 11, 2009
  • 1 reply
  • 605 views

OK so I've been using jquery for a little bit now and love it. It has some awesome drag and drop functionality. I know drag and drop is nothing new, but I've never had the need to use it. I was wondering how everyone uses it as it relates to Fusion.

I have a need where I would like to present the user with a list of categories and the user can drag and drop them to sort, but then I need to post this new sort order to the database. I can get the drag and drop stuff to work as far as spitting out DIVS or spitting out ULs that can be sorted, but then what? So now they are sorted on my screen and not really part of the form. How do I translate that into something I can do a post to the database with? Do I do an AJAX call every time they drop an item and try to extrapolate the sort order on that item after they drop it? Do I populate a hidden form field with the constantly updating sort order list? Maybe a list of ID's? How does everyone else go about this this task? Hopefully someone has done this with jquery as this is what I will be using for the drag and drop code. I'm sure there is more than one way to this and I'm sure this is a common task.

THANKS!

    This topic has been closed for replies.

    1 reply

    Inspiring
    June 12, 2009

    Hello,

    This is what I use to add drag/drop funcationality to my website. It uses SortSerialize (a jQuery function) to serialize the form and pass it to a CFC.

    Serialize gets called when the user clicks on the submit button..

    <input type="button" name="savePage" value="Save Page Layout" onClick="serialize(); return false;" />

    function serialize(s)
            {
                var edcom_id = <cfoutput>#session.edcom_id#</cfoutput>;
                serial = $.SortSerialize(s);
                var sortOrder = serial.hash;
       
                DWREngine._execute(_ajaxConfig._cfscriptLocation, null, 'orderPortfolioSections', edcom_id, sortOrder, serializeCB);
            }

    All from: http://interface.eyecon.ro/demos/sort.html

    HTH

    Josh