JQueryUI-拖动(Draggable)-光标样式

定义和用法

当拖拽对象时定位光标。默认情况下,光标是出现在被拖拽对象的中间。使用 cursorAt 选项来指定相对于 draggable 的另一个
位置(指定一个相对于 top、right、bottom、left 的像素值)。通过提供一个带有有效的 CSS 光标值的 cursor 选项,来自
定义光标的外观

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>光标样式</title>
	<link rel="stylesheet" href="js/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.min.css">
	<style>
		#draggable1,#draggable2,#draggable3,#draggable4,#draggable5,#draggable6{
			width: 100px;
			height: 100px;
			padding: 0.5em;
			float: left;
			margin: 0 10px 10px 0;
		}
	</style>
</head>
<body>
	<div id="draggable1" class="ui-widget-content">
	  	<p>我总是在中间(相对于鼠标)</p>
	</div>

	<div id="draggable2" class="ui-widget-content">
	  	<p>我的光标是在 left -5 和 top -5</p>
	</div>

	<div id="draggable3" class="ui-widget-content">
	  	<p>我的光标位置只控制了 ‘top‘ 值</p>
	</div>

	<div id="draggable4" class="ui-widget-content">
	  	<p>我的光标位置只控制了 ‘right‘ 值</p>
	</div>

	<div id="draggable5" class="ui-widget-content">
	  	<p>我的光标位置只控制了 ‘bottom‘ 值</p>
	</div>

	<div id="draggable6" class="ui-widget-content">
	  	<p>我的光标位置只控制了 ‘left‘ 值</p>
	</div>

	<script src="js/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/external/jquery/jquery.js" type="text/javascript" ></script>
	<script src="js/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
	<script>
		$("#draggable1").draggable({
			cursor:"move",
			cursorAt:{
				top:56,
				left:56
			}
		});

		$("#draggable2").draggable({
			cursor:"move",
			cursorAt:{
				top:-5,
				left:-5
			}
		});

		$("#draggable3").draggable({
			cursor:"move",
			cursorAt:{
				top:0
			}
		});

		$("#draggable4").draggable({
			cursor:"move",
			cursorAt:{
				right:0
			}
		});

		$("#draggable5").draggable({
			cursor:"move",
			cursorAt:{
				bottom:0
			}
		});

		$("#draggable6").draggable({
			cursor:"move",
			cursorAt:{
				left:0
			}
		});
	</script>
</body>
</html>

输出

时间: 2024-10-12 17:28:06

JQueryUI-拖动(Draggable)-光标样式的相关文章

jquery-ui 之draggable详解

举一个例子: <div class="box"> <div id="draggable"> <p>Drag me around</p> <a class="test">notDrag me</a> </div> </div> 使用方法: $( "#draggable" ).draggable(); 注意:使用之前要加上  jquer

用Css定义不同的鼠标光标样式

系统光标大家再熟悉不过了,熟悉的甚至忘了它们的存在.用CSS我们可以将这些光标一一展现出来,本例将展现给大家用CSS实现拖动符的光标.链接小手.移动光标.带问号的光标.不可操作的光标.小手光标.带运行符的光标.上下拖动的光标.普通打字光标.竖向排行的文字光标.系统忙的光标等. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh

css cursor鼠标指针光标样式default pointer hand url

我们在DIV CSS布局时候,我们会遇到对对象内鼠标指针光标进行控制,比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cursor控制.系统默认鼠标指针样式外,可以通过CSS设置图片为鼠标指针,常见有些网站鼠标指针是各种各样小图片样式,当然这个是通过css cursor设置鼠标样式. 详见网站介绍:http://www.divcss5.com/rumen/r427.shtml css cursor鼠标指针光标样式default pointer hand url,布布扣,bubuko

用图片替代cursor光标样式

鼠标光标样式有限,可参考http://css-cursor.techstream.org/,自定义光标样式可用设置cursor:url('xxx.cur',auto;),可是老是不生效,不知什么原因.那怎么办呢?还有一种办法,就是用图片替代鼠标光标,下面就介绍如何使用之. 1.制作光标图片(ps等工具),注意不要用白底,用透明底,透明底一般为gif或者png格式图片. 图1 我做的箭头图片32*32px 2.用一个span标签包含图片 <span id="cursorLRArrow&quo

HTML光标样式

HTML光标样式 把你的光标放到相应文字上鼠标显示效果   cursor:auto;   自动  cursor:all-scroll;  上下左右任何方向滚动  cursor:crosshair;  十字准心  cursor:pointer;  手  cursor:wait;  等待  cursor:help;  帮助  cursor:no-drop;  无法释放  cursor:text;  文字/编辑  cursor:move;  可移动对象  cursor:vertical-text;  

【css】cursor鼠标指针光标样式知识整理

在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状.在这里整理一下cursor鼠标指针光标样式的知识,记录与方便以后查找. 1.常用cursor光标 1 div( cursor:default;} //默认正常鼠标指针 2 div( hand;}和div( cursor:text;} //文本选择效果 3 div( cursor:move;} //移动选择效果 4 div( cursor:pointer;} //手指形状 5 div( cursor:url("

CSS中cursor 鼠标指针光标样式(形状)

在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状.在这里整理一下cursor鼠标指针光标样式的知识,记录与方便以后查找. 常用cursor光标 url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头)auto 默认.浏览器设置的光标.crosshair 光标呈现为十字线.pointer 光标呈现为指示链接的指针(一只手)move 此光标指示某对象可被

CSS使用自定义光标样式-遁地龙卷风

测试环境是chrome浏览器 Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.132 Safari/537.36 css样式 div { cursor:url('1.jpg'),pointer; } HTML <body> <div style="width:100px;height:100px;background-color:red;">

拖动 - draggable

1 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 2 <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> 3 <%@ page contentType="text/html;charset=UTF-8&quo