مسج UI للفرز, كيفية تحديد الموقع الحالي و الموقع الجديد في التحديث الحدث ؟

Question

لدي:

<ul id="sortableList">
     <li>item 1</li>
     <li>item 2</li>
     <li>item 3</li>
</ul>

أنا السلكية إلى update: function(event, ui) { } ولكن لست متأكدا من كيفية الحصول على النسخة الأصلية و الجديدة موضع العنصر.إذا كنت تتحرك في البند 3 أعلاه في البند 1 ، أريد وضعه الأصلي إلى 2 (0 مؤشر) و الموقف الجديد من البند 3 إلى 0.

Answer 1

$('#sortable').sortable({
    start: function(e, ui) {
        // creates a temporary attribute on the element with the old index
        $(this).attr('data-previndex', ui.item.index());
    },
    update: function(e, ui) {
        // gets the new and old index then removes the temporary attribute
        var newIndex = ui.item.index();
        var oldIndex = $(this).attr('data-previndex');
        $(this).removeAttr('data-previndex');
    }
});

Answer 2

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

   $('#sortable').sortable({    
        update: function(e, ui) {
            // ui.item.sortable is the model but it is not updated until after update
            var oldIndex = ui.item.sortable.index;

            // new Index because the ui.item is the node and the visual element has been reordered
            var newIndex = ui.item.index();
        }    
});

Answer 3

لديك عدة احتمالات أن تحقق القديمة و الموقف الجديد.أنا وضعت لهم في المصفوفات.

$('#sortable').sortable({
    start: function(e, ui) {
        // puts the old positions into array before sorting
        var old_position = $(this).sortable('toArray');
    },
    update: function(event, ui) {
        // grabs the new positions now that we've finished sorting
        var new_position = $(this).sortable('toArray');
    }
});

وبعد ذلك يمكنك بسهولة استخراج ما تحتاجه.

Answer 4

كنت أبحث عن إجابة على نفس القضية.بناء على ما فرانكي ساهم كنت قادرا على الحصول على كل من بداية ونهاية "أوامر".كان لي مشكلة مع نطاق متغير باستخدام var, لذلك أنا فقط المخزنة لهم .البيانات() بدلا من المحلية فأر:

$(this).data("old_position",$(this).sortable("toArray"))

و

$(this).data("new_position",$(this).sortable("toArray"))

الآن يمكنك استدعاء مثل هذا (من التحديث الأخير/وظائف):

console.log($(this).data("old_position"))
console.log($(this).data("new_position"))

الائتمان لا يزال يذهب إلى فرانكي :)

Answer 5

هذا عملت بالنسبة لي

$('#sortable').sortable({
start: function(e, ui) {
    // puts the old positions into array before sorting
    var old_position = ui.item.index();
},
update: function(event, ui) {
    // grabs the new positions now that we've finished sorting
    var new_position = ui.item.index();
}
});

Answer 6

هذا يعمل بالنسبة لي ،

$('#app').sortable({
    handle: '.handle',

    start: function(evt, ui){
        $(ui.item).data('old-ndex' , ui.item.index());
    },

    update: function(evt, ui) {
        var old_index = $(ui.item).data('old-ndex');
        var new_index = ui.item.index();

        alert('old_index -'+old_index+' new index -'+new_index);

    }
});