用jquery实现拖拽的效果

原创 2012年03月29日 19:30:32

<!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>
<script language="javascript" type="text/ecmascript"  src="../include/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/ecmascript"  src="../include/jquery-ui-1.8.18.custom.min.js"></script>
<!--引入css样式文件-->
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css">
<script type="text/javascript">
$(document).ready(function(){
 $("#draggable").draggable({
  //revert:true, //返回原始位置
  //helper:"clone",
  //cursor:"move", //鼠标点击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>拖拽的效果</div>
<div id="draggable" style="width:100px; height:100px; border:#06F solid 1px;">

<p>你可以拖拽我到任何地方</p>
</div>
<div id="tx" style="width:300px; height:800px; border:#0F0 solid 1px;">


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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jquery实现简单的拖拽效果,兼容所有浏览器(一)

最近发现web网页的拖拽效果,个人觉得是一种不错的用户体验,抽空研究了一下,原理还蛮简单的,下面贴一下我写的一个简单拖拽jquery自定义函数。          jquery代码:fun.js ...

针对于ie8的拖拽效果的jQuery实现的方法

写这篇文章的原因是因为不久前,我刚遇到这样的问题;说实话,实在是太恶心拉 而且自己又是初学者,完全搞不懂浏览器的版本之间的兼容性原理,而网上有没有关于这方面的很好的解答,着实难受我了好一阵子。好在低版...

jquery实现简单的拖拽效果,兼容所有浏览器(二)

相对于上一篇,优化了拖拽的效果。        js代码:fun.js _MoveObj = null;//全部变量,用来表示当前div z_index = 0;//z方向 jQuery.f...

jquery实现的拖拽效果,解决拖动速度过快时的会卡现象,select的遮挡问题和透明效果

我的html 代码 弹出层 点击这里,弹出层 这是标题 X 关闭 这是内容 ...

jquery实现文本区拖拽

jquery实现拖拽

test #draggable { width: 150px; height: 150px; padding: 0.5em; } $(function () { for(i=0;...

jquery实现div拖拽宽度

本文参考于:http://www.cnblogs.com/yelaiju/archive/2012/02/16/2354602.html 本例是个非常简单的div拖动,有需要的朋友可根据自己的需求,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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