JavaScript Drag & Drop


Lately i was working on some sorting items using drag and drop techniques much like the Ajax style. So this works by sorting your items and then at the end you need to click the “sort now” button which sorts the data by passing it onto the sort method. The JavaScript I used for the dragging effects was from script.aculo.us.

The method that i used was very sleek and the code used for it was very trivial. All that needs to be done is a loop of the list of item that needs to be dragged but with its Primary key field as a hidden form attribute. The name of the hidden field needs to be constant which when submitted will result in a list of primary key fields separated by commas. This technique will result in less code but very accurate for data manipulation. So this is how my UI code looks like;


<cfloop query="qMyQuery">
<cfoutput>
<li class="sortList">#qMyQuery.data#
<input name="sortData" type="hidden" value="#qMyQuery.id#">
</li>
</cfoutput>
</cfloop>

Once you drag and drop the list to the location you want, the sortData's primary key is automatically listed in that order after the submit button is hit. After this, the sortData is passed onto the sort method and all that needs to be done now is a loop on the sortData list with the index of the loop as the sorting order.


<cfloop from="1" to="#ListLen(sortData)#" index="i">
<cfquery name="qSortData" datasource="#variables.myDSN#">
Update tbl_data
SET sort_order = <cfqueryparam value="#i#" cfsqltype="cf_sql_integer">
WHERE data_id = #trim(listGetAt(sortData, i))#
;
</cfquery>
</cfloop>


This post was posted in , by on