Maybe you've gotten it to work in the meantime? Your link works for me in FF3.5, IE6, and Chrome2 on WinXP. - Richard
On Wed, Aug 26, 2009 at 2:41 PM, Yvan <[email protected]> wrote: > > I'm trying to get a ColdFusion/JQuery based example of drag n' drop > reordering of items working, but am encountering some difficulty. A > non-working example (and the underlying source code) can be viewed at > the following url: > > http://www.carolinegleason.com/test.cfm?add=true&cat=men&ID=18&thumb > > Additionally -- the non-rendered source code is attached (see code > snippet below) > > Can anywhere here identify specifically why my list items aren't drag > n' droppable? > > My unrendered CFML, XHTML, and Javascript is below. > > Thanks, > - Yvan > > ------- BEGIN CFML CODE --------- > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> > > <html> > > <head> > > <title>TITLE</title> > > <meta http-equiv="Content-Type" content="text/html; > charset=iso-8859-1"> > > <cfajaxproxy cfc="reorder" jsclassname="myProxy"> > > <link type="text/css" href="admin/css/ui-lightness/jquery- > ui-1.7.2.custom.css" rel="stylesheet" /> > > <script type="text/javascript" src="admin/js/jquery-1.3.2.min.js"></ > script> > > <script type="text/javascript" src="admin/js/jquery- > ui-1.7.2.custom.min.js"></script> > > <script type="text/javascript"> > // this creates an instance of the js proxy to cfc which we created > with cfajaxproxy // > var p = new myProxy(); > > // this jQuery function executes after page DOM is loaded > $(document).ready(function(){ > $("ul.items").disableSelection(); // this disables selection of item > name text. not necessary, but a nice touch when you use Sortable > var $items = $("ul.menuitems"); // this is jQuery object of our > items' container > initSortablesArray($items, 'li', '#tabs', 'y', > 'updateItemsOrder'); //initialize Sortable for our items container > }); > > // this function creates the Sortable for items > var initSortablesArray = function($arrEl, sortItems, sortContainer, > sortAxis, fnCallback) { > $arrEl.each(function() { > var $el = $(this); > $el.sortable({ > items: sortItems, // element to be dragged, <li> in this example > containment: sortContainer, // element dragging is contained to, > div id="tabs" in this example > axis: sortAxis, // axis to allow dragging along, Y in this > example > update: function(event, ui){ // this function fires after an > item changes its position/order after drag > var arrOrder = $el.sortable('toArray'); //serialize the items > into array > console.log(arrOrder); //debug: will display the serialized > array of item in Firebug console - remove when everything is working > var fnToExecute = fnCallback+"('"+arrOrder+"')"; > setTimeout(fnToExecute, 0); //execute callback fucntion > (updateItemsOrder in this example) > } > }); > }); > }; > > /* > this function is called on update event in Sortable list. > i use cfajaxproxy to create a js proxy to a remote cfc function which > updates the items order in the db. > see the CFC section above for the function code. > */ > var updateItemsOrder = function(arrOrder) { > p.setCallbackHandler(updateOrderCB); //js function to execute after > items order is updated in db > p.setErrorHandler(jsProxyError);//js function to execute on cfc/ > proxy error > p.updateOrder(arrOrder);// cfc function to execute > }; > > //success handler > var updateOrderCB = function(result) { > if(result) { > alert("Items order updated!");//change to whatever you want to do > after items order has been updated > } else { > jsProxyError('n/a', 'Could not update items order...');// change > to whatever else you want to do on error in updating items order > } > }; > > // error handler > var jsProxyError = function(code, msg) { > alert("ERROR: "+msg+" (err code: "+code+")");//change to whatever > you do to show errors > }; > </script> > > </head> > > <body> > > <!--- QUERY DATABASE TO RETRIEVE PHOTOS //---> > > <cfquery datasource="#application.datasource#" name="get_photos"> > SELECT * > FROM photos > WHERE category = 'men' AND request_ID = #URL.ID# > ORDER BY priority ASC > </cfquery> > > <!--- QUERY DATABASE TO RETRIEVE PHOTOS //---> > > <cfset i = 1> > > <cfset p = 1> > > <h1>RE-ORDER ITEMS</h1> > > <div id="tabs"> > > <ul class="items"> > > <cfoutput query="get_photos"> > > <li id="i_#ID#"><img src="photos/tn_#photo#" > border="0"></li> > > <cfset i = i + 1> > > <cfif currentrow MOD 2 EQ 0> > > <cfset p = p + 1> > > </cfif> > > </cfoutput> > > </ul> > > </div> > > </body> > </html> > > ------------------------- BEGIN CONTENTS OF reorder.cfc > ---------------------- > > <cffunction name="updateOrder" access="remote" returntype="boolean" > output="no"> > <cfargument name="items_order" required="yes" type="any"> > <cfscript> > var itemsorder = listtoarray(trim(arguments.items_order));// create > local array from received list of element IDs > var qUpdateOrder = "";//create a local var for update query > var x = 0;// this local var will be the cfloop index, which is also > the new ordinal of each item > var itemid = 0;//local var for item's id > var result = true;// function result > </cfscript> > <cfloop from="1" to="#arraylen(itemsorder)#" index="x"> > <!--- our items in the page are <li> elements with unique IDs like > i_#item_id#, thus to extract the item's id from received list of > ordered items we need to parse each list element and get the part > after _ - listlast() cf function makes it very easy. ---> > <cfset itemid = listlast(trim(itemsorder[x]), "_")> > <cftry> > <cfquery name="qUpdateOrder" > datasource="#application.datasource#"> > UPDATE photos > SET priority = <cfqueryparam cfsqltype="cf_sql_smallint" > value="#x#"> > WHERE ID = <cfqueryparam cfsqltype="cf_sql_integer" > value="#itemid#"> > </cfquery> > <cfcatch> > <cfset result = false> > </cfcatch> > </cftry> > </cfloop> > <cfreturn result /> > </cffunction> > > > --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
