jquery-ui-拖

在这里插入图片描述

先中 引入jquery ,再引入jquery-ui

结构

在这里插入图片描述

在这里插入图片描述

盒子可以任意拖动

在这里插入图片描述

限制拖动

限制只让在x方向的拖动

在这里插入图片描述

限制在父级范围内的移动

样式上先包一个父级

在这里插入图片描述

限定在父级内

在这里插入图片描述

???

在这里插入图片描述

事件的第二个参数

在这里插入图片描述

ui参数分析

ui参数是一个对象

其中的offset是偏移量,如图示

在这里插入图片描述

偏移量,position

在这里插入图片描述

在这里插入图片描述

演练

划块拉动。同时显示数值

在这里插入图片描述

代码回看

在这里插入图片描述

练演

拖动,并且让被拖过的区域有一个灰色的效果

同时,文本框显示数值

在这里插入图片描述

在这里插入图片描述

例子,自定义的滚动条

在这里插入图片描述

代码

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/ifubing/article/details/94588521