jq UI-引入、拖动效果、api文档位置

最新推荐文章于 2023-11-17 19:41:30 发布

神奇大叔

最新推荐文章于 2023-11-17 19:41:30 发布

阅读量205

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103531082

版权

jQuery 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

引入
	jq UI的引入在jq的引入下，因为要jq UI要引用jq里的代码
	
拖动
	$('选择器').draggable();
	限制拖动范围
	 containment:'parent'   句尾不能加;分号，表示在父元素范围内移动
	 axis:'x/y'   	只能x方向/y方向拖动
	
偏移量
	 drag:function(event,ui){
	 	console.log(event);  //event为当前事件
	 	console.log(ui.position,ui.offset); 
	 	//ui.position表示到顶部的距离,ui.offset表示到左边的距离
	 }
	 
坐标
	drag:function(event,ui){
		console.log(ui.position.top,ui.position.left);
		//x,y坐标
	}

jquery UI文档链接:api

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				height: 200px;
				width:200px;
				background-color: orange;
			}
			.big{
				height: 500px;
				width: 500px;
				border: solid 2px orange;
			}
		</style>
		<script src="js/jquery-3.4.1.js"></script>
		<script src="js/jquery-ui.min.js"></script>
	</head>
	<body>
	<div class="big">
		<div class="box">
			
		</div>
	</div>
		
		<script>
			$('.box').draggable({
				containment: "parent",
				axis: "x"，
				drag: function( event, ui ) {
				 	console.log(ui.position,ui.offset);
				 	console.log(ui.position.top,ui.position.left);
				 }			
			});
			
		</script>
	</body>
</html>

神奇大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq UI-引入、拖动效果、api文档位置

引入 jq UI的引入在jq的引入下，因为要jq UI要引用jq里的代码拖动 $('选择器').draggable(); 限制拖动范围 containment:'parent' 句尾不能加;分号，表示在父元素范围内移动 axis:'x/y' 只能x方向/y方向拖动jquery UI文档链接:api代码示例：<!DOCTYPE html><h...
复制链接

扫一扫