jquery-ui怎样实现拖拽效果

1、如图所示，在HTML中界面引入jquery和jquery-ui，jquery一定要jquery-ui前面，否则无法实现想要的效果。

3、如图所示，设置f的style样式效果，给它添加一个边框即可。然后这就是f的预览效果图。

4、如图所示，来再设置一下s的style样式，大小不要超过之前的f，设置背景色为红色。

7、如果我们想要把红色div约束在黑色边框里面，那就添加这样的一个属性。如图所示，添加containment: "parent"就可以了。

9、当然，还可以限制红色div的拖拽方向，比如设置axis属性为y。这样的话，红色div只能往垂直方向拖拽，水平方向拖拽无效。