Jquery ui工作代码笔，但不是网站

对不起，我知道我不应该在这里问这样的问题，但我真的搞不懂。.draggable函数正在codepen上运行。但是在我的网站上有完全相同的代码和插件链接，它不起作用吗

我不知道该怎么办。。如果你能帮助我，非常感谢

//单击显示隐藏
函数showNavi（）{
$（“#导航”）。切换（1000）；
$（'#description.fa chevron down'）。toggleClass（'rotate180'）；
$（'.rainbow'）.toggleClass（'changecolor'））
};
//滚动到顶部
//检查窗口是否在顶部，如果不是，则显示按钮
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>100）{
$（'.scrolltotop'）.fadeIn（）；
}否则{
$（'.scrolltotop'）.fadeOut（）；
}
});
//单击事件以滚动到顶部
$（'.scrolltotop'）。单击（函数（）{
$（'html，body'）.animate（{scrollTop:0}，800）；
返回false；
});
//随机颜色
功能入口（classnm）{
$（classnm）.css（'border-color'，randomColor({
亮度：“明亮”，
格式：“hsl”
}))
};
功能notEntryOver（classnm）{
$（classnm）.css（'border-color'，“#dadada”）
};
//图标下拉列表
函数IConFunction（）{
$（'#mainicons'）。切换（“bounce”，{times:3}，“slow”）；
$（'i#avatar i'）。toggleClass（'rotateavatar'）；
};
$（函数（）{
$（“.about”）.draggable（{cursor:“move”}）；
} );
a{
文本装饰：无
}
/*--分页--*/
.分页{
宽度：300px；
高度：300px；
显示器：flex；
对齐项目：柔性端；
证明内容：中心；
}
.页码a{
边缘底部：10px；
颜色：#fff；
背景色：#巴巴巴；
显示：内联块；
宽度：20px；
高度：20px；
文本对齐：居中；
边界半径：100%；
线高：20px；
左边距：5px；
}
.分页a：悬停{
颜色：#58acfa；
背景：#fff；
}
.当前页面{
边缘底部：10px；
颜色：{color:Text}；
填充：4px；
边框底部：1px实心#58acfa；
左边距：5px
}
/*------菜单-----*/
.关于{
光标：移动；
z指数：1000；
位置：固定；
宽度：300px；
高度：300px；
左：100px；
顶部：60px；
保证金：0自动；
边界半径：5px；
边框：1px实心#巴巴巴；
背景：白色；
-webkit过渡：.5s轻松；
-moz转换：.5s易用性；
-o-转变：.5s；
过渡：放松；
}
/*主要图标*/
#主要图标{
位置：绝对位置；
顶部：60px；
左：15px；
文本对齐：居中；
不透明度：1；
-webkit过渡：全部.7秒轻松；
-moz过渡：所有.7秒轻松；
-o型过渡：所有。7秒缓解；
过渡：全部。7秒轻松；
}
#主图标>a{
边缘顶部：10px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#主要图标i{
显示：块；
高度：20px；
宽度：20px；
填充：10px；
颜色：#fff；
背景：巴巴巴；
边界半径：100%；
字体大小：16px；
线高：20px；
-webkit过渡：全部。5s轻松；
-moz过渡：全部5秒轻松；
-o型过渡：全部。5秒轻松；
过渡：所有。5s轻松；
}
#主要图标一：悬停{
背景：#fff；
-ms变换：旋转（360度）；
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}
#主图标。fa主页：悬停{
颜色：红色；
}
#mainicons.fa注释：悬停{
颜色：#fe9a2e；
}
#fa下载：悬停{
颜色：#37ce00；
}
#主图标。fa地址卡：悬停{
颜色：#58acfa；
}
/*化身*/
#化身{
位置：绝对位置；
光标：指针；
利润率：10px 0 10px；
宽度：50px；
高度：50px；
z指数：10；
}
#阿凡达img{
宽度：100%；
身高：100%；
边界半径：100%；
-webkit过渡：所有0.6秒轻松；
-moz转换：所有0.6秒的易用性；
-ms转换：所有0.6s的易用性；
-o型过渡：所有0.6s的轻松度；
过渡期：所有0.6秒缓解；
}
#阿凡达i{
位置：绝对位置；
左：0；
宽度：101%；
身高：101%；
边界半径：100%；
字体大小：15px；
线高：50px；
文本对齐：居中；
颜色：#巴巴巴；
不透明度：0；
背景：#fff；
-webkit过渡：所有0.6秒轻松；
-moz转换：所有0.6秒的易用性；
-ms转换：所有0.6s的易用性；
-o型过渡：所有0.6s的轻松度；
过渡期：所有0.6秒缓解；
}
#阿凡达：悬停i{
不透明度：1；
}
罗塔瓦塔酒店{
-ms变换：旋转（180度）；
-webkit变换：旋转（180度）；
变换：旋转（180度）；
}
/*描述*/
#描述{
位置：绝对位置；
溢出：隐藏；
利润率：10px090px；
颜色：#000；
背景：#达达达；
填充：2x10px 2x10px；
宽度：180px；
字体大小：13px；
线高：18px；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-ms过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
}
#描述：之后{
内容：''；
位置：绝对位置；
边框样式：实心；
边框宽度：18px 18px 18px 0；
边框颜色：透明#fff；
显示：块；
宽度：0；
z指数：1；
左-18px；
顶部：10px；
}
.彩虹{
位置：绝对位置；
宽度：200%；
高度：2倍；
排名：0；
左：0；
不透明度：0.5；
边界半径：5px5px0；
背景图片：-webkit渐变（线性、左上、右上、颜色停止（0，#f22）、颜色停止（0.15，#f2f）、颜色停止（0.3，#22f）、颜色停止（0.45，#2ff）、颜色停止（0.6，#2f2）、颜色停止（0.75，#2f2）、颜色停止（0.9，#ff2）、颜色停止（1，#f22））；
背景图像：渐变（线性、左上、右上、颜色停止（0，#f22）、颜色停止（0.15，#f2f）、颜色停止（0.3，#22f）、颜色停止（0.45，#2ff）、颜色停止（0.6，#2f2）、颜色停止（0.75，#2f2）、颜色停止（0.9，#ff2）、颜色停止（1，#f22））；
-webkit过渡：所有0.7秒轻松；
-moz过渡：所有0.7秒轻松；
-ms转换：所有0.7秒轻松；
-o型过渡：所有0.7秒容易；
过渡：所有0.7秒缓解；
}
.彩虹茶