如何使用css,把div设置为一个椭圆容器,在做html页面开发时,我们一般都是使用div来做容器的,如果你需要一个椭圆形的容器,我们可以使用div来实现的,下面来看一下。......
jquery-ui怎样实现拖拽效果
拖拽效果在网页中很常见,一起来看看如何实现吧。
工具/原料
- jquery jquery-ui插件
- vscode或其他编辑器
方法/步骤
如图所示,在HTML中界面引入jquery和jquery-ui,jquery一定要jquery-ui前面,否则无法实现想要的效果。
如图所示,给div嵌套一个div,并且添加id。我给div添加了f和s的id。
如图所示,设置f的style样式效果,给它添加一个边框即可。然后这就是f的预览效果图。
如图所示,来再设置一下s的style样式,大小不要超过之前的f,设置背景色为红色。
如图所示,基本样式都写完了。接着我们开始给红色的div添加拖拽效果。使用("#s")来获取到红色的div,然后调用draggable方法来给获取到的红色div添加拖拽效果。
如图所示,再去看HTML界面,这时候就可以用鼠标拖拽红色的div了。然后把它移动到黑色的边框上。
如果我们想要把红色div约束在黑色边框里面,那就添加这样的一个属性。
如图所示,添加containment: "parent"就可以了。
添加containment: "parent"之后,红色div无论怎么拖拽都会被限制在黑色边框里面了。
当然,还可以限制红色div的拖拽方向,比如设置axis属性为y。这样的话,红色div只能往垂直方向拖拽,水平方向拖拽无效。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具,MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具,MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗?MAKA(中文:码卡)作为中国最早推出移动端卡片式交互模式的创新者,随着HTML5技术的日渐成熟......
2023-03-16 435 HTML