jQuery排序

Question

我在jquery中使用可排序函數來排序faq列表。不用說，我是這個概念的新手。任何人都有這方面的後端很好的例子。我的前臺工作正常，但更新數據庫中的序列是另一回事。我的後端是ColdFusion btw。

在此先感謝

Answer 1

定義FAQ：

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

製作常見問題排序：

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

形式提交：

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

添加排序順序形成

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

當表單提交，現場 「常見問題解答」 會包含逗號分隔的ID從#faq常見這樣的： Q1，Q3，Q10，Q11，Q2，Q100 ...

就分析它，並保存到DB

Answer 2

以下是Jquery UI Sortable的簡單示例，它如何與div一起使用。

首先在HTML庫：）

$(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（從叫：

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

這裏是排序功能可排序的更新事件處理程序回調：

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