jquery插件——拖拽效果

原创 2012年03月29日 20:09:28
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="../css/ui-lightness/jquery-ui-1.8.18.custom.css" />

<script language="javascript" type="text/javascript" src="../js/jquery-1.7.1.min.js">
</script>
<script language="javascript" type="text/javascript" src="../js/jquery-ui-1.8.18.custom.min.js">
</script>


<script language="javascript" type="text/javascript">
      $(document).ready(function (){
		  $("#draggable").draggable({
			  //axis:"x",//只能x轴拖动
			  //revert:true,//回到原始位置
			  //revert:"invalid",
			  //helper:"clone",//克隆
			 // cursor:"move",
			// cursor:"crosshair",//鼠标点击move后鼠标的效果为crosshair
			 
			  cursorAt:{top:100,left:100},
			  start:function(event,ui){
				  
				  },
				zIndex:10,
				opacity:0.2,
				grid:[20,60],
				containment:"#tx",
				
			  
			  });
		  
		  });

</script>
</head>

<body>
<div id="draggable" style="width:100px;height:100px;border:#F93 solid 1px;">
<p>aaaaaaaaaaaa</p>

</div>
<div id="tx" style="border:#F99 solid 2px;width:400px;height:300px;">


</div>
</body>
</html>


效果图如下

相关文章推荐

利用jquery插件中的拖拽与放置实现的相册效果,可以删除和恢复

该效果为官方提供,本人只是进行了一下翻译,加了些详细注释供大家参考,对大家有帮助就ok了,如有解释错误谢谢提出。 以下是需要引入的一些文件,如果没有您可以通过给定的地址进行下载,谢谢: j...

jQuery插件2(拖拽draggable/放置droppable/排序sortable/面板折叠accordion/横向选项卡tabs/对话框dialog/menu/微调spinner/框提示)

1、拖曳插件——draggable 通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). draggable({options}) options...

网站开发常用jQuery插件总结(三)拖拽插件gridster

1.gridster插件功能 实现类似于win8 磁贴拖拽的功能 2.gridster官方地址 http://gridster.net/ 在官方的网站上也有插件的帮助和实例,但是按照官方的说明...

jquery插件——模拟dialog效果案例

jQuery插件开发全解析 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery 的全局函数就是属于jQuery...

bootstrap中jquery插件——collapse折叠效果-手风琴效果

先来掌握collapse插件的基本用法,再慢慢深入实例。 collapse最基本的效果是像下图所示的,点击按钮可以显示/隐藏下面的元素: 实现代码如下:Link with href //...

6个免费的翻页效果jquery插件

在过去的三到五年web开发世界,jQuery的引入和流行已经取得重大的进展。Web开发人员和程序员,不断引进新的概念和方法,创建类似Flash惊人效果,然而:Flash变得过时了,Flash正在越来越...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery插件——拖拽效果
举报原因:
原因补充:

(最多只允许输入30个字)