用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>

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

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

JavaScript实现网页元素的拖拽效果

JavaScript实现网页元素的拖拽效果
  • jackfrued
  • jackfrued
  • 2014年04月26日 00:27
  • 12187

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

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

WinForm支持拖拽效果

有一个MSDN客户提问在WinForm中如何实现拖拽效果——比如在WinForm中有一个Button,我要实现的效果是拖拽这个Button到目标位置后生成一个该控件的副本。 其实这个操作主要...
  • qq798833488
  • qq798833488
  • 2016年06月02日 10:17
  • 2285

H5的拖曳效果示例

利用H5新增的draggable和ondrag*事件可以用简单的代码完成拖曳事件: H5的拖拽效果实例 #box{ height: 200px; width: 200px;...
  • misakaqunianxiatian
  • misakaqunianxiatian
  • 2016年02月13日 13:46
  • 3468

JS+DIV 实现拖动效果

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

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

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

Web前端从入门到放弃(js鼠标拖拽特效)

js鼠标拖拽特效 我们来实现用鼠标点击一个盒子并可以在浏览器窗口下拖拽 原理:利用鼠标点击盒子,然后通过鼠标坐标减去盒子在浏览器的坐标从而得到鼠标在盒子上的disX和disY的值,在利用onm...
  • Du_Ke_Can
  • Du_Ke_Can
  • 2016年10月12日 19:03
  • 881

别人用jquery写的图片拖拽效果

拖动  /*  作者: 谢泽龙  联系QQ: 454675335 (灬丿Spam丶)  时间: 2014-9-24  www.jq22.com */  $(functio...
  • javajingling
  • javajingling
  • 2016年07月31日 23:17
  • 498

【Unity3D自学记录】实现地球仪般拖拽旋转的效果

01 using UnityEngine; 02 using System.Collections; 03 ...
  • hackdjh
  • hackdjh
  • 2014年07月04日 11:50
  • 2570
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用jquery实现拖拽的效果
举报原因:
原因补充:

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