ড্র্যাগ অ্যান্ড ড্রপ ইউআই দিয়ে তালিকা আইটেম সাজানোর অর্ডার পরিচালনার সর্বোত্তম উপায় কী?

Question

আমার কাছে শিক্ষার্থীদের একটি তালিকা রয়েছে যা আমার ওয়েব পৃষ্ঠায় ট্যাবুলার ফর্ম্যাটে ব্যবহারকারীদের কাছে প্রদর্শন করা উচিত।
আইটেমগুলি SortOrder তথ্যের সাথে ডিবিতে সংরক্ষণ করা হয়।

ওয়েব পৃষ্ঠায়, ব্যবহারকারীরা এই পোস্টের মতো আইটেমগুলি তাদের পছন্দসই বাছাই ক্রমে আইটেমগুলি টেনে এনে ফেলে দিয়ে তালিকার ক্রমটি পুনর্বিন্যস্ত করতে পারে ।

নীচে আমার পরীক্ষা পৃষ্ঠাটির একটি স্ক্রিনশট রয়েছে।

উপরের উদাহরণে, প্রতিটি সারিতে এর সাথে সাজানো অর্ডার তথ্য থাকে। আমি যখন জন দো (স্টুডেন্ট আইডি 10) কে শিক্ষার্থী আইড 1 সারিটির উপরে রেখে দিই, তালিকার ক্রমটি এখন হওয়া উচিত: 2, 10, 1, 8, 11।

ক্রম অর্ডার তথ্য সংরক্ষণ এবং আপডেট করার জন্য আশাবাদী (কম সংস্থার ক্ষুধার্ত) উপায় কী?

আপাতত আমার একমাত্র ধারণাটি হ'ল তালিকার ক্রম অনুসারে প্রতিটি পরিবর্তনের জন্য, প্রতিটি বস্তুর SortOrder মান আপডেট করা উচিত, যা আমার মতে খুব সংস্থান ক্ষুধার্ত।

কেবলমাত্র এফওয়াইআই: আমার টেবিলে আমার কমপক্ষে 25 টি সারি থাকতে পারে।

Comments

আপনার কি এই সাজানোর ক্রমটি সার্ভারের পাশ ধরেই থাকা দরকার, বা এটি কেবল ক্লায়েন্টের পক্ষে যথেষ্ট?

— deterb

আমার অর্ডারটি সার্ভার-সাইডে সঞ্চয় করা উচিত। অর্ডারটি প্রতিটি ড্র্যাগ-ড্রপে বা একবার এবং সবার জন্য একটি বোতামে ক্লিক করে সঞ্চিত থাকে তা বিবেচ্য নয়।

— আলেকজান্ডার

Answer 1

আমার এমন কিছু বিষয় আছে যা আপনার প্রশ্নগুলি হ্রাস করতে পারে। এখানে আমার উদাহরণে, আমি columnনাম অনুসারে বাছাইয়ের জন্য একটি নতুন যুক্ত করেছি pos। সুতরাং, প্রথমদিকে কোনও টানা ছাড়াই আপনার টেবিলটি এমন হবে -

এখন, বিবেচনা করি যে আপনি & এর Item 4মধ্যে টেনে নিয়েছেন । এখন, নতুন মান হবে , যা । সুতরাং, আপনাকে কেবল ডাটাবেসে একটি একক সারি আপডেট করতে হবে। এবং, আপনি পাবেন -Item 1Item 2posItem 4(20 + 10) / 215

প্রান্তের কেসগুলির সাথে এখানে একটি ফ্লোচার্ট দেওয়া হয়েছে। iআপনার সারির নতুন অ্যারে সূচকটি টেনে আনার পরে -

এই ফ্লোচার্ট ArrayOutOfBoundচেকগুলি পরিচালনা করে না । এবং, প্রান্তের ক্ষেত্রে আপনার একাধিক প্রশ্নের প্রয়োজন হবে need

যেহেতু আপনার কেবল 25 টি সারি রয়েছে, আপনি 10,000পজ পার্থক্যের জন্য খুব বড় মান (উদাহরণস্বরূপ ) নিতে পারেন (আমি 10এই উদাহরণটি দিয়েছি )। মানটি যত বড় হবে ততই সংঘর্ষ হবে।

Comments

এটি একটি দুর্দান্ত পদ্ধতির। লক্ষ্য করুন যে কোনও আইটেম সন্নিবেশ করার মতো জায়গা না থাকলে আপনাকে পুরো (বা একটি বড় অংশ) অর্ডারিং তথ্যটি পুনরায় গণনা করতে হবে। এটি করা একটি বিরল যথেষ্ট ইভেন্ট হবে।

— 9000

@ 9000 সমস্যাটি এড়াতে আপনি দশমিকের পরিবর্তে দশমিক ব্যবহার করতে পারেন।

— রিফাত

আপনার যদি Item A123 অবস্থান এবং Item C124 অবস্থানের সাথে Item B থাকে তবে তাদের মধ্যে রাখার সহজ উপায় নেই । একটি সমাধান ভগ্নাংশ সংখ্যা ব্যবহার করা হবে (যেমন ফ্লোট), তবে তাদের খুব সীমিত নির্ভুলতাও রয়েছে। কখনও কখনও আপনি ভাড়াটিয়া করা, অন্তরগুলিকে সাধারন করা এবং জিনিসগুলি সহজ রাখা থেকে ভাল better

— 9000

সুতরাং যখন আপনি আই-- করেন, আপনি কেবল ১ দ্বারা বিয়োগ করছেন event এমন কোনও আলাদা ব্যবধান নেই যা শেষ পর্যন্ত সংঘর্ষ রোধ করতে আপনি বিয়োগ করতে পারবেন?

— muttley91

@ রিফাত এমনকি দশমিকেরও সীমাবদ্ধ নির্ভুলতা রয়েছে, সুতরাং এগুলিও সংঘর্ষে নেমে আসবে।

— এসসিআই

Answer 2

ব্যক্তিগতভাবে আমি পিছনের প্রান্ত থেকে ডেটার জন্য একটি JSON অ্যারে ফিরিয়ে দেব। তারপরে আমি জাভাস্ক্রিপ্ট (জকিউয়ারি বা নকআউট) ব্যবহার করব এবং ডেটা প্রদর্শন এবং সাজানোর জন্য এবং পুনরায় সাজানোর জন্য ব্যবহার করব। এইভাবে বাছাইয়ের সার্ভারে শূন্য লোড রয়েছে।

Answer 3

আপনি এটি পরিচালনা করার জন্য একটি সংস্থান-বান্ধব উপায় সন্ধান করছেন তবে ব্যবহারকারী-বান্ধব দৃষ্টিকোণটিও একটি আবশ্যক। আমি প্রতিটি পুনরায় অর্ডার হওয়া আইটেমের পরে স্বতন্ত্র অনুরোধগুলির প্রস্তাব দিই। প্রতিটি কল আপনাকে গৃহীত বা ব্যর্থ হয়েছে কিনা তা যাচাই করার অনুমতি দেয়।

• ব্যর্থ প্রতিক্রিয়াগুলি ভিউটি পুনরায় সেট করবে এবং শেষ ব্যবহারকারীকে একটি বার্তা প্রদর্শন করবে।
• স্বীকৃত অনুরোধগুলি সহজ সম্পাদনা চালিয়ে যায়।

বিকল্পভাবে, একটি জেএসওএন অবজেক্ট (@ টম-স্কোয়ারস) ব্যবহার করা এইচটিটিপি ওভারহেড এবং সার্ভার-সাইড প্রসেসিং হ্রাস করার জন্য একটি ভাল ধারণা তবে শেষ পর্যন্ত সার্ভার এবং ক্লায়েন্ট পক্ষের অনুরোধগুলি পরিচালনা করতে আরও কোডের প্রয়োজন। যদি তা ঠিক থাকে তবে সার্ভারে অবজেক্টটি পাস করা সবচেয়ে প্রযুক্তিগতভাবে দক্ষ। আপনি যদি এটি চান তবে এটি একক অনুরোধের আগে একাধিক পুনর্বিন্যাসের অনুমতি দিতে কয়েক সেকেন্ডের বিলম্বেরও অনুমতি দেয়।

মনে রাখবেন, ব্যর্থ অনুরোধগুলির প্রতিক্রিয়া সহ কোনও ব্যবহারকারীকে সরবরাহ করার জন্য আপনাকে কোন আইটেমটি ব্যর্থ হয়েছে তা নির্ধারণ করতে এবং তার ভিত্তিতে ইউআই পুনরায় সেট করতে সার্ভার থেকে একটি প্রতিক্রিয়া জেএসওএন অবজেক্টকে পার্স করতে হবে।

Answer 4

ড্রপ ইভেন্ট হ্যান্ডলারটিতে এরকম কিছু, যেখানে ই ডিএনডি ইভেন্ট।

        ....
        if (e.Action == DragAction.Drop)
        {
            foreach(var item in Items)
            {
                if (e.NewIndex == e.OldIndex) // Dropped in same place
                    return;
                if(e.OldIndex > e.NewIndex) // Moved Up
                {
                    if (item.SortOrder >= e.NewIndex && item.SortOrder < e.OldIndex)
                    {
                        item.SortOrder ++;
                    }
                }
                else // Moved Down
                {
                    if (item.SortOrder> e.OldIndex && item.SortOrder < e.NewIndex) 
                    {
                        item.SortOrder --;
                    }
                }   
            }
            ((Student)e.ItemData).SortOrder = e.NewIndex;
        }
    ...