JQuery sort

Question

I am using a sortable function in jquery for the faq list sequence. Needless to say, I'm new to this concept. Anyone have any good examples for this. My front is working fine, but updating the sequence in the database is another story. My backend is ColdFusion.

Thanks in advance

Answer 1

Define faq:

<div id="faq">
  <div id="q1">...</div>
  <div id="q2">...</div>
  (...)
  <div id="q100">..</div>
</div>

Make faq sortable:

<script type="text/javascript">
  $("#faq").sortable();
</script>

Presented form:

<form action="..." id="faq_form">
  <input type="hidden" name="faqs" id="faqs" />
  ...
</form>

Add a sorted sequence to form

<script type="text/javascript>
  $("#faq_form").submit(function() {
    $("#faqs").val($("#faq").sortable('toArray'))
  })
</script>

When the form is submitted, the "faqs" field will contain the identifier, separated by a comma, from #faq as follows: q1, q3, q10, q11, q2, Q100 ...

Just analyze it and save to DB

Answer 2

JQuery UI Sortable, div.

html:

 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>` <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>`<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>``

Html :

<div id="target">
    <div style="cursor: move;" class="entity">
        <div class="digit"><span>1</span><tab />&nbsp; First Item </div>            
    </div>      
    <div style="cursor: move;" class="entity">
        <div class="digit"><span>2</span>&nbsp; Second Item</div>           
    </div>      
    <div style="cursor: move;" class="entity">
        <div class="digit"><span>3</span>&nbsp; Third Item</div>            
    </div>
    <div style="cursor: move;" class="entity">
        <div class="digit"><span>4</span>&nbsp; Fourth Item</div>           
    </div>
    <div style="cursor: move;" class="entity">
        <div class="digit"><span>5</span>&nbsp; Fifth Item</div>            
    </div>
</div>

:

$(document).ready(function() {
    $('#target').sortable({
        items:'div.entity', //the div which we want to make sortable            
        scroll:true,        //If set to true, the page 
                            //scrolls when coming to an edge.
        update:function(event,ui){ renumber(); } //This event is triggered when the user 
                                                //stopped sorting and the DOM position has changed.
    });
});

renuber() Sortable update:

function renumber()
{
    $('.digit span').each(function(index,element) {
        $(element).html(index+1);
    });
}