sortables مسج

Question

وأنا باستخدام وظيفة للفرز في مسج تسلسل قائمة الأسئلة الشائعة. وغني عن القول، أنا جديدة لهذا المفهوم. أي شخص لديه أي أمثلة جيدة على الواجهة الخلفية لهذا الغرض. لدي الجبهة على ما يرام، ولكن تحديثها تسلسل في قاعدة البيانات هي قصة أخرى. بلدي الخلفية هي كولد فيوجن راجع للشغل.

وشكرا مقدما

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

وعندما يتم إرسال النموذج، "الأسئلة المتكررة" حقل سيحتوي فاصلة تفصل في هوية من #faq مثل هذا: Q1، Q3، Q10، Q11، Q2، Q100 ...

ومجرد تحليل ذلك، وحفظ لDB

Answer 2

وهنا مثال بسيط من مسج UI قابل للفرز، وكيف يمكن استخدامها مع وشعبة.

وتشمل الأولى المكتبات في أتش تي أم أل:

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

والاكواد لصنع للفرز:

<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 () يتم استدعاؤها من فرز من رد معالج الحدث تحديث:

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