Динамическое перетаскивание для построения слова

Могу ли я каким-либо образом преобразовать это простое перетаскивание в более динамичное, которое может помочь построить слово в случайном порядке. Код ниже представляет собой простое перетаскивание:

$(".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;" />
                         }

В настоящее время слова перетаскиваются, и пользователь может создавать слова, однако в этом перетаскивании нет логики/функциональности, которая проверяет, что буква может быть отброшена только в правильном месте и только эта буква. Это гарантировало бы, что только исходное слово может быть построено.


person Lulutho Mgwali    schedule 09.08.2015    source источник


Ответы (1)


Я предлагаю вам иметь отбрасываемый слот для каждого перетаскиваемого элемента и сделать так, чтобы он принимал только идентификатор этого конкретного перетаскиваемого элемента:

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

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

                                }
                            });

                        }
                    });
                });



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

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

                                }
                            });

                        }
                    });
                });

так далее....

person Diza    schedule 27.08.2015