Ok, I have some sorting/drag and drop code that works fine as far as that basic functionality goes. I need to be able to serialize and save the sorting order to send back to the set method for the database.
Here is my js:
<script language="JavaScript" type="text/javascript">
$(function() {
$("ul.droptrue").sortable({
connectWith: 'ul',
opacity: 0.6,
update : updatePostOrder
});
<script language="JavaScript" type="text/javascript">
$(function() {
$("ul.droptrue").sortable({
connectWith: 'ul',
opacity: 0.6,
update : updatePostOrder
});
$("##sortable1, ##sortable2").disableSelection();
$("##sortable1, ##sortable2").css('minHeight',$("##sortable1").height()+"px");
updatePostOrder();
});
function updatePostOrder() {
var arr = [];
$("##sortable2 li").each(function(){
arr.push($(this).attr('id'));
});
$('##postOrder').val(arr.join(','));
}
$("##wrapper").on("click", "a.secondary", function(event){
$.ajax({
url: "index.cfm?action=younger.trackListEdit",
type: "POST",
dataType: "json",
data: $("##wrapper form").serialize(),
success: function(d, t, x){
if(d.svrstatus == "0"){
settings.elem.$cocktailID.removeClass("problem-price");
settings.$price30Dist.text(d.distcost30);
settings.$price90Dist.text(d.distcost);
settings.$price30Cust.text(d.retailcost30);
settings.$price90Cust.text(d.retailcost);
settings.$price30BV.text(d.bv30);
settings.$price90BV.text(d.bv);
settings.elem.specProcInput.val("*" + d.cocktailcode);
settings.elem.$frm
.find("input[name=labelName]")
.val(settings.custName);//reset so that the label will work properly
settings.elem.$cocktailID.toggleClass("loadingPrice", !!--requesting);
}
else{
_.general.processAjaxError();
}
},
error: function(x, t, e){
_.general.processAjaxError();
}
});
});
</script>
and here is my html
<form name="trackListEdit" action="index.cfm?action=younger.albumsEdit" method="post">
<h1>Edit Track List - #variables.songData.albumName#</h1>
<div class="left">
<div id="songList">
<fieldset class="three">
<h3>All Songs</h3>
<div id="instructions">Drag and drop or re-order Tracks</div>
<div id="songList">
<ul id="sortable1" class='droptrue'>
<cfloop from="1" to="#variables.songData.songListCnt#" index="i">
<li class="ui-state-default" id="article_1">#variables.songData.songList[i]# <input type="hidden" name="prodID" value="#variables.songData.songList[i]#" /></li>
</cfloop>
</ul>
</div>
</fieldset>
</div>
</div>
</form>
<form name="trackListEdit" action="index.cfm?action=younger.albumsEdit" method="post">
<div class="right">
<div id="trackList">
<fieldset class="three">
<h3>Tracks on - #variables.songData.albumName#</h3>
<div id="instructions">Drag and drop songs to upload and re-order Album Tracks</div>
<ul id="sortable2" class='droptrue'>
<cfloop from="1" to="#variables.songData.trackListCnt#" index="i">
<li>#variables.songData.trackList[i]#<input type="hidden" name="prodID" value="#variables.songData.trackList[i]#" /></li>
</cfloop>
</ul>
</fieldset>
</div>
<a class="button secondary" href="##">Edit</a>
</div>
</form>