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 () মানটি অ্যাক্সেস করতে হবে এবং সেই মানটি সংরক্ষণ করতে হবে।

— ডেভিড বোইকে

# সোর্টেবল ডিভের মধ্যে ডিভ-আইডি বাছাইযোগ্য পোর্টলেটগুলি খুঁজে পাওয়ার কোনও উপায় আছে কি?

— ফ্রাঙ্ক

এছাড়াও, সাথে ড্রাগ করার সময় আপনার যদি অবস্থানটি ট্র্যাক করতে হয় তবে আপনি sortব্যবহার করতে পারেন ui.placeholder.index। ইনডেক্স অবস্থান 1. আরম্ভ করা হয়

— Loïc 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

তুমি আমার দিন বাঁচাও! স্যার প্রশ্ন, আমি আজাক্স ব্যবহার করে নতুন অবস্থানটি কীভাবে সংরক্ষণ করতে পারি?

— mrrsb

বাছাইযোগ্য ম্যান পেজগুলিতে কেন তাদের মতো সরল উদাহরণ নেই? আমি সত্যিই বুঝতে পারিনি যে আমি startএগুলি না পাওয়া পর্যন্ত আইটেমগুলি stopসুযোগে থাকতে সক্ষম ছিল ।

— সাবেলফোস্টে

এ জাতীয় সাধারণ কার্যকারিতা

— বাছাইয়ের

Answer 3

থামার পরিবর্তে আপডেট ব্যবহার করুন

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

আপডেট (ইভেন্ট, ইউআই)

প্রকার: ক্রমবর্ধমান

এই ইভেন্টটি ট্রিগার করা হয় যখন ব্যবহারকারী বাছাই বন্ধ করে দেয় এবং DOM অবস্থান পরিবর্তন করে।

।

স্টপ (ইভেন্ট, ইউআই)

প্রকার: sortstop

বাছাই বন্ধ হয়ে গেলে এই ইভেন্টটি ট্রিগার করা হয়। ইভেন্ট প্রকার: ইভেন্ট

কোড টুকরা:

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" );

এবং যদি আপনি সতর্কতা বা কনসোল করেন তবে এই ভেরি (सॉোর্টডআইডি)। আপনি আপনার ক্রম পাবেন। যদি এটি সঠিক হয় তবে দয়া করে "সঠিক উত্তর" হিসাবে চয়ন করুন।