jQuery sortables

Question

Sto usando la funzione ordinabile in jquery per sequenziare un elenco di domande frequenti. Inutile dire che sono nuovo di questo concetto. Qualcuno ha qualche buon esempio del backend per questo. Ho il fronte funzionante, ma l'aggiornamento della sequenza nel database è un'altra storia. Il mio backend è ColdFusion tra l'altro.

Grazie in anticipo

Answer 1

Definisci la faq:

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

Rendi ordinabile la faq:

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

Modulo inviato:

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

Aggiungi sequenza ordinata al modulo

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

Quando viene inviato il modulo, campo "quotazioni" " conterrà gli ID separati da virgola da #faq in questo modo: q1, q3, Q10, Q11, q2, Q100 ...

Basta analizzarlo e salvare su DB

Answer 2

Ecco un semplice esempio dell'interfaccia utente di Jquery ordinabile, come può essere utilizzato con i div.

Per prima cosa includi le librerie nel tuo 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 per rendere ordinabile:

<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>

Ecco la funzione ordinabile:

$(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 () viene chiamato dal callback del gestore eventi di aggiornamento ordinabile:

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