jquery div拖动效果示例代码


Posted in Javascript onDecember 08, 2013
<%@ page language="java" contentType="text/html; charset=utf-8" 
pageEncoding="utf-8"%> 
<!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>拖动DIV</title> 
<style type="text/css"> 
.show{ 
background:#7cd2f8; 
width:100px; 
height:100px; 
text-align:center; 
position:absolute; 
z-index:1; 
left:100px; 
top:100px; 
} </style> 
<script type="text/javascript" src="../Script/jquery-1.7.2.js"></script> 
<script type="text/javascript"><!-- 
$(document).ready(function() 
{ 
$(".show").mousedown(function(e)//e鼠标事件 
{ 
$(this).css("cursor","move");//改变鼠标指针的形状 
var offset = $(this).offset();//DIV在页面的位置 
var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离 
var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离 
$(document).bind("mousemove",function(ev)//绑定鼠标的移动事件,因为光标在DIV元素外面也要有效果,所以要用doucment的事件,而不用DIV元素的事件 
{ 
$(".show").stop();//加上这个之后 
var _x = ev.pageX - x;//获得X轴方向移动的值 
var _y = ev.pageY - y;//获得Y轴方向移动的值 
$(".show").animate({left:_x+"px",top:_y+"px"},10); 
}); 
}); 
$(document).mouseup(function() 
{ 
$(".show").css("cursor","default"); 
$(this).unbind("mousemove"); 
}) 
}) 
// --></script> 
</head> 
<body> 
<div class="show"> 
jquery实现DIV层拖动 
</div> 
</body> 
</html>
Javascript 相关文章推荐
javascript删除字符串最后一个字符
Jan 14 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
Dec 20 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
svg动画之动态描边效果
Feb 22 Javascript
Webpack的dll功能使用
Jun 28 Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
微信小程序实现侧边分类栏
Oct 21 Javascript
jquery垂直公告滚动实现代码
Dec 08 #Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 #Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 #Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 #Javascript
JavaScript 32位整型无符号操作示例
Dec 08 #Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 #Javascript
js快速排序的实现代码
Dec 08 #Javascript
You might like
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
简述vue状态管理模式之vuex
2018/08/29 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
2015/04/09 Python
Python绘制3D图形
2018/05/03 Python
python中的句柄操作的方法示例
2019/06/20 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
中专生职业生涯规划书范文
2014/01/10 职场文书
新学期开学标语
2014/06/30 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
会议通知格式范文
2015/04/15 职场文书
学校社团活动总结
2015/05/07 职场文书
2016情人节宣传语
2015/07/14 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
python基础详解之if循环语句
2021/04/24 Python
关于python爬虫应用urllib库作用分析
2021/09/04 Python