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 相关文章推荐
基于Web标准的UI组件 — 树状菜单(2)
Sep 18 Javascript
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
jQuery代码优化 事件委托篇
Nov 01 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
5种处理js跨域问题方法汇总
Dec 04 Javascript
JavaScript事件委托实例分析
May 26 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
react实现一个优雅的图片占位模块组件详解
Oct 30 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 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
php 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
PHP定时任务延缓执行的实现
2014/10/08 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
Python实现的爬取百度贴吧图片功能完整示例
2019/05/10 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
高中考试作弊检讨书
2014/01/14 职场文书
个人简历中自我评价
2014/02/11 职场文书
党员创先争优公开承诺书
2014/03/28 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
个性发展自我评价2015
2015/03/09 职场文书
通过Python把学姐照片做成拼图游戏
2022/02/15 Python