gpt4 book ai didi

javascript - 动态拖放以构建单词

转载 作者:太空宇宙 更新时间:2023-11-03 15:35:51 25 4
gpt4 key购买 nike

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

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

}
});

}
});
});

有没有什么方法可以转换这个简单的代码以适应更动态的功能,或者可能从不同的 Angular 来解决这个问题。

这是随机顺序“单词”的代码:

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

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

最佳答案

我建议您为每个可拖动元素设置一个可放置插槽,并使其仅接受该特定可拖动元素的 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') + ' ');

}
});

}
});
});

等....

关于javascript - 动态拖放以构建单词,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31909406/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com