jquery-ui-拖

jquery-ui-拖_第1张图片

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

结构

jquery-ui-拖_第2张图片

jquery-ui-拖_第3张图片

盒子可以任意拖动

jquery-ui-拖_第4张图片

限制拖动

限制只让在x方向的拖动

jquery-ui-拖_第5张图片

jquery-ui-拖_第6张图片

限制在父级范围内的移动

样式上先包一个父级

jquery-ui-拖_第7张图片

限定在父级内

jquery-ui-拖_第8张图片

contain,包含

ment,英语中的一个后缀,表示什么什么东动,什么什么项目

containment, 包含的东西,容器

movement,运动项目

???

jquery-ui-拖_第9张图片

事件的第二个参数

jquery-ui-拖_第10张图片

ui参数分析

ui参数是一个对象

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

jquery-ui-拖_第11张图片

偏移量,position

jquery-ui-拖_第12张图片

jquery-ui-拖_第13张图片

演练

划块拉动。同时显示数值

jquery-ui-拖_第14张图片

jquery-ui-拖_第15张图片

代码回看

jquery-ui-拖_第16张图片

练演

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

同时,文本框显示数值

jquery-ui-拖_第17张图片

在这里插入图片描述

例子,自定义的滚动条

jquery-ui-拖_第18张图片

代码

jquery-ui-拖_第19张图片

jQuery outerHeight() 方法 | 菜鸟教程
https://www.runoob.com/jquery/html-outerheight.html

你可能感兴趣的:(jquery-ui-拖)