如何在jquery中使用css来洗牌拖放

我制作了一个“选择并重新排序”模块，在该模块中，我们拖放选项。如果选项按正确的顺序排列，那么它将同时显示按钮，说明这是正确的（如图所示）

为了显示正确的顺序或正确的答案，我做了两个按钮的回顾或正确的答案，但在回顾我的答案后，我的按钮无法修复

函数洗牌（数组）{
对于（设i=array.length-1；i>0；i--）{
设j=Math.floor（Math.random（）*（i+1））；
设temp=array[i]；
数组[i]=数组[j]；
数组[j]=温度；
}
返回数组；
}
让问题={
名称：“排序”，
选项：[“一个句子是一组原则上能表达一个完整思想的单词，”，“尽管脱离上下文孤立起来可能没有什么意义。”，“通常一个句子包含一个主语和谓语。”，
更正顺序：“1,2,3”
};
假设答案正确=错误；
让我们更正_html=“”；
让当前_html=“”；
函数init（）{
let list_html=[]；
让li_类=[‘第一’、‘第二’、‘第三’]；
for（设i=0；i”+问题。选项[i]+'；
list_html.push（li_html）；
}
correct_html=createHTML（list_html，false）；
createHTML（list_html，true）；
}
函数createHTML（list\u html，is\u shuffle）{
$（'.header'）.find（'span'）.text（question.name）；
if（is_shuffle）{
var list_html=shuffle（list_html）；
}
让list\u html\u str=list\u html.join（“”）；
if（is_shuffle）{
$（'ul'）.append（list_html_str）；
}否则{
返回列表\u html\u str；
}
}
$（函数（）{
init（）；
$（“#可排序”）。可排序({
回复：真
});
$（“#可拖动”）。可拖动({
connectToSortable:“#可排序”，
助手：“克隆”，
回复：“无效”
});
$（“ul，li”）.disableSelection（）；
$（“#可排序”）。可排序({
回复：对，
更新：功能（事件、用户界面）{
设x=evalAns（）；
}
});
});
函数evalAns（）{
设seq=0；
$（“.ui_color”）。每个（函数（）{
$（this.attr（'useq'，seq）；
seq++；
$（this.find（'.number'）.html（+$（this.attr（'useq'）+1）；
让is_correct=$（this.attr（'useq'）==$（this.attr（'cseq'）；
答案正确吗；
});
}
功能审查答案（是否正确）{
设btnui={
不正确：[“错误”，“错误”]，
正确：[“正确”，“正确”]
};
控制台日志（btnui）；
if（typeof is_correct=='undefined'&&&$（'#review'）。attr（'correct'）==1）{
$（'ul'）.html（当前的html）；
$（'#review'）.attr（'correct'，0）；
控制台日志（审核）；
}
$（“.ui_color”）。每个（函数（）{
让is_correct=$（this.attr（'useq'）==$（this.attr（'cseq'）；
让btn_css=is_correct？btnui.correct:btnui.incorrect；
$（this.find（'button'）.remove（）；
$（this）.append（“”+btn_css[1]+“”）；
});
让is_correct_ans=is_correct | | is| u response_correct；
让res\u ui=is\u correct\u ans？btnui.correct:btnui.incorrect；
$（'.first_right'）.html（''）.append（''+res_ui[1]+''）
$（'.result'）.html（''）.append（''+res_ui[1]+''）
$（'.third_result'）.html（''）.append（''+res_ui[1]+''）
}
函数correctAnswer（）{
当前_html=$（'ul'）.html（）；
$（'ul'）.html（正确的html）；
$（“.ui_color”）。每个（函数（）{
$（this.attr（'useq'，$（this.attr（'cseq'））；
});
$（#review'）.attr（'correct'，1）；
reviewAnswer（正确）；
}

ul{
列表样式类型：无；
保证金：0；
填充：0；
边缘底部：10px；
}
.集装箱{
右侧填充：15px；
左侧填充：15px；
右边距：自动；
左边距：自动；
}
.结果
{
位置：相对位置；
底部：5em；
左：14em；
}
.ui_颜色{
保证金：5px；
填充物：5px；
宽度：570px；
高度：47px；
背景色：#46B8DA；
边框：1px实心#C5C5；
字体大小：正常；
颜色：#4545；
}
.标题
{
边框：1px纯黑；
宽度：569px；
高度：37像素；
填充：17px 0 11px；
左边距：6px；
}
.底部{
显示：内联；
浮动：无；
填充：0px 6px 1px 6px；
位置：相对位置；
底部：7em；
左：14em；
}
.桌状
{
高度：368px；
}
.全境
{
边框：1px实心#800080；
宽度：592px；
}
.首先，对吗
{
背景：#008000；
位置：相对位置；
左：55%；
顶部：7px；
颜色：#fff；
边框：1px实心#008000；
宽度：90px；
高度：31px；
盒影：3px 6px 5px#8888888；
}
.第三，对吗
{	
背景：#008000；
位置：相对位置；
左：30px；
底部：7px；
颜色：#fff；
边框：1px实心#008000；
宽度：90px；
高度：31px；
盒影：3px 6px 5px#8888888；
}
.对{
背景：#008000；
位置：相对位置；
左：20px；
顶部：7px；
颜色：#fff；
边框：1px实心#008000；
宽度：90px；
高度：31px；
盒影：3px 6px 5px#8888888；
}
.错了{
背景：#b20000；
位置：相对位置；
左：20px；
顶部：7px；
边框：1px实心#b20000；
宽度：90px；
高度：31px；
颜色：#fff；
盒影：3px 6px 5px#8888888；
}
.首先
{
填充：0px 115px 0px 0px；
}
第二
{
填充：0px 15px 0px 0px；
}

jQuery UI可拖动+可排序
选择并重新订购


复习
正确答案

我认为这段代码对您很有用

函数洗牌（数组）{
对于（设i=array.length-1；i>0；i--）{
设j=Math.floor（Math.random（）*（i+1））；
设temp=array[i]；
数组[i]=数组[j]；
数组[j]=温度；
}
返回数组；
}
让问题={
名称：“排序”，
选项：[“一个句子是一组原则上能表达一个完整思想的单词，”，“尽管我