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

小灰灰 2021-07-24 19:08 303阅读 0赞

引入
    	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>

[api]: https://jqueryui.com/draggable/

发表评论取消回复

表情：

评论列表（有 0 条评论，303人围观）

还没有评论，来说两句吧...

相关阅读

相关 JQ实现拖动选择时间段

前言概述本文介绍利用JQ实现拖动选择时间段的示例，该实例可默认显示设置的时间段、可拖动多个时间段、可伸缩时间段、可合并时间段并能导出所有时间段的详细信息

﹏ヽ暗。殇╰゛Y/ 2022年12月16日 06:20/ 0 赞/ 119 阅读

相关 js的拖动效果

体验成长的快乐,即使风雨满天............................ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

阳光穿透心脏的1/2处/ 2022年08月14日 03:58/ 0 赞/ 128 阅读

相关 JQ动画效果

一看到动画效果我就激动的不行，很多人学JS可能都是为了特效，duang~duang~，好啦，下面我就记录下我在李炎恢老师视频中学的动画，在这里记下笔记首先我们常用的动画有

迷南。/ 2022年08月01日 14:47/ 0 赞/ 232 阅读

相关 JQ——tooltip(jq-ui)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

小灰灰/ 2022年06月04日 10:18/ 0 赞/ 195 阅读

相关 JQ标签页(jq-ui)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

浅浅的花香味﹌/ 2022年06月04日 10:17/ 0 赞/ 271 阅读

相关 JQ——menu(jq-ui)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

爱被打了一巴掌/ 2022年06月04日 10:14/ 0 赞/ 187 阅读

相关 JQ——日历(jq-ui)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

蔚落/ 2022年06月04日 10:12/ 0 赞/ 209 阅读

相关 JQ插件封装(jq_ui风格)

源码： <!DOCTYPE HTML> <html> <head> <title>读取并修改元素的属性</title> <meta c

r囧r小猫/ 2022年06月02日 23:27/ 0 赞/ 189 阅读

相关 jQ 引入、补充

引入下载文件(script引入) 引入静态cdn文件(上网搜，复制文件路径，script引入) <script src="js/jquery-3.4.1.js">

「爱情、让人受尽委屈。」/ 2021年07月24日 19:09/ 0 赞/ 377 阅读

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

引入 jq UI的引入在jq的引入下，因为要jq UI要引用jq里的代码拖动 $('选择器').draggable();

小灰灰/ 2021年07月24日 19:08/ 0 赞/ 304 阅读