拖拽效果在网页中还算比较常见， 今天我就来分享一下jquery-ui怎样实现拖拽效果 。 工具/材料 电脑
jquery， jquery-ui插件
vscode（其他编辑器也可以）
操作方法 01 第一步， 在HTML中界面引入jquery和jquery-ui， 注意jquery一定要jquery-ui前面， 不然会报错， 无法实现想要的效果 。

02 然后给div嵌套一个div， 并且添加id， 结构如图所示 。 我就给div添加了f和s的id 。




03 然后设置f的style样式效果， 给它添加一个边框即可 。




04 如图， 这就是f的预览效果图 。




05 然后再设置一下s的style样式， 大小不要超过之前的f， 设置背景色为红色 。




06 如图， 基本样式都写完了 。 默认情况下， 元素是没有拖拽效果的， 接着我们开始给红色的div添加拖拽效果 。




07 【jquery】如图， 使用("#s")来获取到红色的div， 然后调用draggable方法来给获取到的红色div添加拖拽效果 。




08 如图， 再去看HTML界面， 这时候就可以用鼠标拖拽红色的div了 。 如图所示， 小编我就把它移动到了黑色的边框上 。




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




10 添加containment: "parent"之后， 红色div无论怎么拖拽都会被限制在黑色边框里面了哦 。




11 当然， 还可以限制红色div的拖拽方向， 比如我就设置它的axis属性为y 。




12 这样的话， 红色div只能往垂直方向拖拽， 水平方向拖拽无效的哦 。






以上内容就是jquery的内容啦， 希望对你有所帮助哦！

猜你喜欢

• HTML文字显示如何添加投影效果？
• WPS表格中如何设置图形为三维效果？
• 教你做PS绘制爆炸的星球效果
• 文人墨客共茶情谊，苦荞茶的效果
• premiere的方向模糊效果怎么使用
• premiere的吸色管填充效果怎么使用
• 南路边茶减肥抑癌效果，玫瑰花的疗效
• 如何利用PPT制作汽车里程表动画效果
• PPT制作设置幻灯片之间切换过程的分割动画效果
• PS如何制作晕染文字效果？