jQuery 可排序

Posted 2023-05-08

【中文标题】jQuery 可排序

【英文标题】：jQuery sortables

【发布时间】：2010-09-16 06:28:00

【问题描述】：

我在 jquery 中使用 sortable 函数来排序一个常见问题列表。不用说，我对这个概念很陌生。任何人都有这方面的后端很好的例子。我的前端工作正常，但更新数据库中的序列是另一回事。顺便说一句，我的后端是 ColdFusion。

提前致谢

【参考方案1】：

定义常见问题：

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

提交表单时，“faqs”字段将包含来自#faq 的逗号分隔 ID，如下所示： q1,q3,q10,q11,q2,q100...

只需解析并保存到数据库

【讨论】：

对于像我这样的新手，不要忘记将您的 Jquery 代码放在一个函数中，即 $(function() //your code );这可能是错误的/显而易见的，但在我这样做之前我无法让上述工作正常工作。

【参考方案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 更新事件处理回调中调用：

function renumber()

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