jQuery UI 拖动(Draggable) - 还原位置

定义和用法

当带有布尔值 revert 选项的 draggable 停止拖拽时,返回 draggable(或它的助手)到原始位置

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>jQuery UI 拖动(Draggable) - 还原位置</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 { 
			width: 200px; 
			height: 200px; 
			padding: 0.5em; 
			float: left; 
			margin: 0 10px 10px 0; 
		}

  		#draggable p { 
  			cursor: move; 
  		}
	</style>
</head>
<body>
	<div id="draggable1" class="ui-widget-content">
	  	<p>还原</p>
	</div>
 
	<div id="draggable2" class="ui-widget-content">
		<p>还原助手</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>
		$(function(){
			$("#draggable1").draggable({
				revert:true
			});

			$("#draggable2").draggable({
				revert:true,
				helper:‘clone‘
			});
		});
	</script>
</body>
</html>

输出

时间: 2024-10-06 00:16:34

jQuery UI 拖动(Draggable) - 还原位置的相关文章

jQuery UI 拖动(Draggable) - 事件

定义和用法 draggable 上的 start.drag 和 stop 事件.拖拽开始时触发 start 事件,拖拽期间触发 drag 事件,拖拽停止时触发  stop 事件 示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&

jQuery UI 拖动(Draggable) - Handles和Cancel

定义和用法 只有当光标在 draggable 上指定部分时才允许拖拽.使用 handle 选项来指定用于拖拽对象的元素(或元素组)的 jQuery 选择 器或者当光标在 draggable 内指定元素(或元素组)上时不允许拖拽.使用 cancel选项来指定取消拖拽功能的 jQuery 选择器 示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equi

jQuery UI 拖动(Draggable) - 延迟开始

定义和用法 通过 delay 选项设置延迟开始拖拽的毫秒数.通过 distance 选项设置光标被按下且拖拽指定像素后才允许拖拽 示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>jQuery 

让 jQuery UI draggable 适配移动端

背景: 在移动端,本人要实现对某个元素的拖动,想到使用 jQuery UI 的 draggable 功能.但是发现此插件的拖动只支持PC端,不支持移动端. 原因: 原始的 jQuery UI 里,都是mousedown.mousemove.mouseup来描述拖拽和鼠标的点击事件,而在移动端里,肯定要新添touchstart.touchmove.touchend来描述拖拽和手指的点击事件 实现 demo: <!DOCTYPE html> <html lang="en"

jQuery基础(常用插件 表单验证,图片放大镜,自定义对象级,jQuery UI,面板折叠)

1.表单验证插件--validate   该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({options}) 其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置.     2.表单插件--form 通过表单form插件,调用ajaxForm()方法,实现ajax方式向服务器提交表单数据,并通过方法中的option

jQuery UI draggable+droppable+resizable+selectable+sortable

<script language="JavaScript" type="text/javascript" src="ui/jquery-1.8.2.js"></script> <script language="JavaScript" type="text/javascript" src="ui/jquery-ui-1.9.1.custom.js">&

jQuery UI - draggable 中文API

十分好用,只需引入必要文件 <script src="script/jquery-1.7.2.js"></script><script src="script/jquery-ui.min.js"></script><script src="script/jquery.ui.touch-punch.min.js"></script> 添加标签<script>$('#

jQuery UI API - 可拖拽小部件(Draggable Widget)(转)

所属类别 交互(Interactions) 用法 描述:允许使用鼠标移动元素. 版本新增:1.0 依赖: UI 核心(UI Core) 部件库(Widget Factory) 鼠标交互(Mouse Interaction) 注释:让被选元素可被鼠标拖拽.如果您不只是拖拽,而是拖拽 & 放置,请查看 jQuery UI 可放置(Droppable)插件,为可拖拽元素提供了一个放置目标. 快速导航 选项 方法 事件 addClasses appendTo axis cancel connectToS

一款基于jquery ui漂亮的可拖动div实例

今天要给大家带来一款基于jquery ui漂亮的可拖动div实例.这款实例用了图片当背景,div层采用了幽灵透明效果.div拖动是基于jquery ui的.界面非常漂亮.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div id="box1" class="box blurred-bg tinted"> <h1> Blurred Background</h1> <h2> By <a h