การลากและวางแบบไดนามิกเพื่อสร้างคำ

มีวิธีใดบ้างที่ฉันสามารถเปลี่ยนการลากและวางแบบง่ายๆ นี้ให้เป็นคำที่มีพลังมากขึ้นซึ่งสามารถช่วยสร้างคำที่เรียงลำดับแบบสุ่มได้ โค้ดด้านล่างนี้เป็นการลากและวางง่ายๆ:

$(".draggable").draggable({
                    revert: 'invalid',
                    start: function (event, ui) {
                        result.fadeOut(1000);

                    },
                    stop: function (event, ui) {
                        if (!$(this).hasClass('correct')) {
                            result.html("Try again that's a " + $(this).attr("id")).fadeOut(100);
                            result.fadeIn(1000);

                                }
                            });
                        }

                    }
                });


                $(".droppable").droppable({
                    accept: '.correct',
                    drop: function (event, ui) {

                        correctResult.fadeIn(1000);
                        correctResult.prepend('Well done! You found the ' + ui.draggable.attr('id') + ' ');

                            }
                        });

                    }
                });
            });

มีวิธีใดบ้างในการแปลงโค้ดง่ายๆ นี้ให้เหมาะกับฟังก์ชันการทำงานแบบไดนามิกมากขึ้น หรืออาจเป็นมุมที่แตกต่างในการแก้ไขปัญหานี้

นี่คือรหัสสำหรับ 'คำ' ลำดับแบบสุ่ม:

string word = words[correctImageIndex].engWord;
List<char> wordChar = word.ToList();
Random random = new Random(wordChar.Count);
List<int> selectedIndexes = new List<int>();                             

                        <br /><br />


                         foreach (var letter in wordChar)
                         {
                             int index = wordChar.IndexOf(letter);
                             int randomNumber =random.Next(0, wordChar.Count);
                             while (randomNumber == index || selectedIndexes.Contains(randomNumber))
                             {
                                 randomNumber = random.Next(0, wordChar.Count);
                             }

                            <img class="draggable correct" src="~/Image/DrawLetters?letter=@wordChar[randomNumber]">
                             selectedIndexes.Add(randomNumber);
                         }

                         <br />

                         foreach (var letter in wordChar)
                         {
                                <img class="droppable" src="~/Content/Images/horizontal.gif" style="width:50px; height:20px;" />
                         }

ขณะนี้คำทำการลากและวางและผู้ใช้สามารถสร้างคำได้ อย่างไรก็ตาม ไม่มีตรรกะ/ฟังก์ชันการทำงานสำหรับการลากและวางที่จะตรวจสอบว่าตัวอักษรสามารถวางได้เฉพาะในตำแหน่งที่ถูกต้องและเฉพาะตัวอักษรนั้นเท่านั้น สิ่งนี้จะช่วยให้แน่ใจว่าสามารถสร้างได้เฉพาะคำดั้งเดิมเท่านั้น