用于构建单词的动态拖放答案

【问题标题】：Dynamic drag and drop for building a word用于构建单词的动态拖放
【发布时间】：2015-08-09 22:24:11
【问题描述】：

有什么方法可以将这个简单的拖放转换为更动态的，可以帮助构建一个随机顺序的单词。下面的代码是一个简单的拖放：

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

目前单词可以拖放并且用户能够构建单词，但是这种拖放没有逻辑/功能来检查一个字母是否只能在正确的位置放置并且只有那个字母.这将确保只能构建原始单词。

【问题讨论】：

标签： javascript c# jquery asp.net-mvc drag-and-drop

【解决方案1】：

我建议您为每个可拖动元素设置一个可放置槽，并使其仅接受该特定可拖动元素的 ID：

    $(".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') + ' ');

                                }
                            });

                        }
                    });
                });

等等……

【讨论】：