Apakah ada cara saya dapat mengubah drag and drop sederhana ini menjadi lebih dinamis yang dapat membantu membangun sebuah kata dalam urutan acak. Kode di bawah ini adalah drag and drop sederhana:
$(".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') + ' ');
}
});
}
});
});
Apakah ada cara untuk mengubah kode sederhana ini agar sesuai dengan fungsi yang lebih dinamis, atau mungkin sudut pandang yang berbeda untuk mengatasi hal ini.
Berikut adalah kode untuk 'kata' urutan acak:
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;" />
}
Saat ini kata-kata tersebut melakukan drag dan drop dan pengguna dapat membangun kata tersebut, namun tidak ada logika/fungsi pada drag and drop ini yang memeriksa sebuah huruf hanya dapat dijatuhkan di lokasi yang benar dan hanya huruf itu. Ini akan memastikan bahwa hanya kata asli yang dapat dibuat.
