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>


效果图如下

C# winform 拖拽效果

步骤: 1、 通过DragEnter事件获得被拖入窗口的“信息”(可以是若干文件,一些文字等等),在DragDrop事件中对“信息”进行解析。 2、接受拖放控件的AllowDrop属性必须设置...
  • shuanger_
  • shuanger_
  • 2015年09月17日 16:57
  • 641

移动端拖拽的实现效果

拖拽
  • xyphf
  • xyphf
  • 2016年07月21日 23:17
  • 3743

Android实现拖动效果的两种解法

因为最近项目的需要,需要实现一个拖动效果,看了一下网上刚好有这种拖动效果的demo,代码大概如下: private void initListener(){ screenWidth =...
  • u013772458
  • u013772458
  • 2016年12月19日 11:48
  • 577

JS+DIV 实现拖动效果

效果图 思路 代码 优化封装以及解决拖动问题事件捕获效果图思路代码 Title ...
  • mixi9760
  • mixi9760
  • 2016年07月28日 20:59
  • 4197

Unity3D 触摸拖拽效果

在游戏制作或者应用制作中,鼠标或者触摸屏操作必不可少,像武器装备,从背包中把武器拖向人物属性,这个过程在Unity中没有相应的StarDarg、StopDrag方法。但是继承与MonoBehaviou...
  • luoyikun
  • luoyikun
  • 2017年07月21日 16:01
  • 430

MFC总结(18) --- 实现拖拽效果

效果图 在Windows下很多工具,都实现了拖拽的功能,代码功能相对来说比较简单,一共需要两个步骤 第一步: 创建MFC工程后,将该Dlg对话框中的Accept Files属性设置为True, ...
  • oBuYiSeng
  • oBuYiSeng
  • 2015年11月21日 15:36
  • 1192

页面中拖拽效果的实现

可拖放DOM模式(Draggable DOM pattern)可以让用户在Web页面中对各个部分进行编辑,即只需要选中要移动的部分,将其拖拽到新的位置上,就可以重新安排整个页面的布局效果,下面介绍一下...
  • tycsl
  • tycsl
  • 2007年11月16日 23:24
  • 4114

js案例 元素的拖拽与吸附(touch+translate)

*{ padding: 0; margin: 0; } .fa{ height: 300px; width: 99%;; border: 1px s...
  • u011301203
  • u011301203
  • 2016年11月29日 14:03
  • 1721

【Android】一个适用于大图界面向下拖拽返回的效果

GitHub:DragBottom 适用于查看大图的下拉拖拽返回控件 共享元素适用于5.0+ 1、XML porster.dragbottom.drag.DragFrameLayout xm...
  • dqmj2
  • dqmj2
  • 2017年06月09日 14:08
  • 640

Winform支持拖拽效果

以下为转载内容:     有一个MSDN客户提问在WinForm中如何实现拖拽效果——比如在WinForm中有一个Button,我要实现的效果是拖拽这个Button到目标位置后生成一个该控件的副...
  • ziyaziya05
  • ziyaziya05
  • 2013年06月08日 15:18
  • 438
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery插件——拖拽效果
举报原因:
原因补充:

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