jQuery यूआई सॉर्ट करने योग्य स्थिति

Question

मैं कैसे ट्रैक कर सकता हूं कि किसी क्रमबद्ध सूची में इसकी स्थिति बदलने पर कोई तत्व किस स्थिति में है?

Answer 1

आप uiघटनाओं को प्रदान की गई वस्तु का उपयोग कर सकते हैं , विशेष रूप से आप इस तरह की stopघटना , ui.itemसंपत्ति और .index()चाहते हैं:

$("#sortable").sortable({
    stop: function(event, ui) {
        alert("New position: " + ui.item.index());
    }
});

आप यहां एक कार्यशील डेमो देख सकते हैं , याद रखें कि .index()मूल्य शून्य-आधारित है, इसलिए आप प्रदर्शन उद्देश्यों के लिए +1 करना चाह सकते हैं।

Comments

एक अतिरिक्त नोट के रूप में, यदि आप यह ट्रैक करना चाहते हैं कि स्थानांतरित वस्तु कहां से आई (स्थिति 0 से स्थिति 2 तक ले जाएं) तो आपको प्रारंभ घटना में ui.item.index () मान तक पहुंचने और उस मूल्य को संग्रहीत करने की आवश्यकता है।

— डेविड बोइक

क्या #sortable div के भीतर सॉर्टेबल पोर्टल्स div-id खोजने का एक तरीका है?

— फ्रैंक

इसके अलावा, अगर आप स्थिति ट्रैक करने की जरूरत खींचें दौरान साथ sort, आप उपयोग कर सकते हैं ui.placeholder.index। सूचकांक 1. स्थिति में शुरू होता है

— Lonamc Pennamen

Answer 2

मुझे यकीन नहीं था कि मैं शुरुआत की स्थिति को कहाँ रखूँगा, इसलिए मैं डेविड बाइक्स की टिप्पणी पर विस्तार से बताना चाहता हूँ। मैंने पाया कि मैं उस चर को ui.item ऑब्जेक्ट में ही स्टोर कर सकता हूं और स्टॉप फ़ंक्शन में इसे पुनः प्राप्त कर सकता हूं:

$( "#sortable" ).sortable({
    start: function(event, ui) {
        ui.item.startPos = ui.item.index();
    },
    stop: function(event, ui) {
        console.log("Start position: " + ui.item.startPos);
        console.log("New position: " + ui.item.index());
    }
});

Comments

तुम मेरा दिन बचाओ! सर सवाल, मैं अजाक्स का उपयोग करके नई स्थिति कैसे बचा सकता हूं?

— मर्सब

क्यों वे इस तरह के आदमी पृष्ठों पर एक सरल उदाहरण नहीं है? मुझे वास्तव में इस बात का एहसास नहीं था कि जब तक मैंने इसे देखा तब तक आइटम startइस stopदायरे में रहने में सक्षम थे ।

— सेबलफॉस्ट

मुझे यह

— समझ

Answer 3

स्टॉप के बजाय अपडेट का उपयोग करें

http://api.jqueryui.com/sortable/

अपडेट करें (घटना, यूआई)

प्रकार: सॉर्टअपडेट करें

जब उपयोगकर्ता ने सॉर्ट करना बंद कर दिया है और DOM स्थिति बदल गई है तो यह घटना शुरू हो गई है।

।

रुकें (घटना, यूआई)

प्रकार: छँटाई

छंटनी बंद हो जाने पर यह घटना शुरू हो जाती है। घटना प्रकार: घटना

कोड का टुकड़ा:

http://jsfiddle.net/7a1836ce/

<script type="text/javascript">

var sortable    = new Object();
sortable.s1     = new Array(1, 2, 3, 4, 5);
sortable.s2     = new Array(1, 2, 3, 4, 5);
sortable.s3     = new Array(1, 2, 3, 4, 5);
sortable.s4     = new Array(1, 2, 3, 4, 5);
sortable.s5     = new Array(1, 2, 3, 4, 5);

sortingExample();

function sortingExample()
{
    // Init vars

    var tDiv    = $('<div></div>');
    var tSel    = '';

    // ul
    for (var tName in sortable)
    {

        // Creating ul list
        tDiv.append(createUl(sortable[tName], tName));
        // Add selector id
        tSel += '#' + tName + ',';

    }

    $('body').append('<div id="divArrayInfo"></div>');
    $('body').append(tDiv);

    // ul sortable params

    $(tSel).sortable({connectWith:tSel,
       start: function(event, ui) 
       {
            ui.item.startPos = ui.item.index();
       },
        update: function(event, ui)
        {
            var a   = ui.item.startPos;
            var b   = ui.item.index();
            var id = this.id;

            // If element moved to another Ul then 'update' will be called twice
            // 1st from sender list
            // 2nd from receiver list
            // Skip call from sender. Just check is element removed or not

            if($('#' + id + ' li').length < sortable[id].length)
            {
                return;
            }

            if(ui.sender === null)
            {
                sortArray(a, b, this.id, this.id);
            }
            else
            {
                sortArray(a, b, $(ui.sender).attr('id'), this.id);
            }

            printArrayInfo();

        }
    }).disableSelection();;

// Add styles

    $('<style>')
    .attr('type', 'text/css')
    .html(' body {background:black; color:white; padding:50px;} .sortableClass { clear:both; display: block; overflow: hidden; list-style-type: none; } .sortableClass li { border: 1px solid grey; float:left; clear:none; padding:20px; }')
    .appendTo('head');


    printArrayInfo();

}

function printArrayInfo()
{

    var tStr = '';

    for ( tName in sortable)
    {

        tStr += tName + ': ';

        for(var i=0; i < sortable[tName].length; i++)
        {

            // console.log(sortable[tName][i]);
            tStr += sortable[tName][i] + ', ';

        }

        tStr += '<br>';

    }

    $('#divArrayInfo').html(tStr);

}


function createUl(tArray, tId)
{

    var tUl = $('<ul>', {id:tId, class:'sortableClass'})

    for(var i=0; i < tArray.length; i++)
    {

        // Create Li element
        var tLi = $('<li>' + tArray[i] + '</li>');
        tUl.append(tLi);

    }

    return tUl;
}

function sortArray(a, b, idA, idB)
{
    var c;

    c = sortable[idA].splice(a, 1);
    sortable[idB].splice(b, 0, c);      

}
</script>

Answer 4

Jquery के आधिकारिक दस्तावेज के अनुसार छाँटे जाने योग्य UI: http://api.jqueryui.com/sortable/#method-toArray

अद्यतन घटना में। उपयोग:

var sortedIDs = $( ".selector" ).sortable( "toArray" );

और यदि आप इस var (सॉर्ट किए गए) को अलर्ट या कंसोल करते हैं। आपको अपना क्रम मिल जाएगा। कृपया सही उत्तर के रूप में "सही उत्तर" चुनें।