Javascript jQuery UI Dragable无法与jQueryUI 1.12.1一起使用

现在我正在学习jQueryUI，但是我无法拖动我用HTML和CSS创建的框。我在jQuery版本1.12.1中使用HTML5和CSS3。任何帮助/建议都会非常有用。提前谢谢

HTML代码：

jQuery用户界面代码：

$(function(){
    $('.box').draggable();
});

$（'.box'）.draggable（）
.box{
高度：200px；
宽度：200px；
显示：内联块；
文本对齐：居中；
线高：200px；
字体大小：粗体；
颜色：白色；
利润率：0.20px；
}
#框1{
背景：浅蓝色；
}
#框2{
背景：浅绿色；
}
#框3{
背景：紫色；
}
#方框4{
背景：黑色；
}
.box:悬停{
光标：指针；
}

可拖动的jQueryUI
方框1
方框2
方框3
方框4
为了添加注释，我可以选择框中的文本为box1、box2、box3和box4，但无法拖动它们。您的代码可以工作。检查控制台是否有任何可能抛出的错误。
.box{
    height:200px;
    width:200px;
    display:inline-block;
    text-align: center;
    line-height: 200px;
    font-weight: bold;
    color:white;
    margin:0 20px;
}

#box1{
    background:lightblue;
}

#box2{
    background:lightgreen;
}

#box3{
    background:purple;
}

#box4{
    background:black;
}

.box:hover{
    cursor:pointer;
}

$(function(){
    $('.box').draggable();
});