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 相关文章推荐
js checkbox(复选框) 使用集锦
Apr 28 Javascript
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
史上最为详细的javascript继承(推荐)
May 18 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
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
php中adodbzip类实例
2014/12/08 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
Node.js获取前端ajax提交的request信息
2017/02/20 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
用Python编写简单的微博爬虫
2016/03/04 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
python 格式化输出百分号的方法
2019/01/20 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
优纳科技软件测试面试题
2012/05/15 面试题
总经理秘书工作职责
2013/12/26 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
班级口号大全
2014/06/09 职场文书
酒店端午节活动方案
2014/08/26 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
人事局接收函
2015/01/31 职场文书
交通事故责任认定书
2015/08/06 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js