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的null和undefined区别示例介绍
Sep 15 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
vue 自定义提示框(Toast)组件的实现代码
Aug 17 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 Javascript
Javascript实现打鼓效果
Jan 29 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+MySQL 制作简单的留言本
2009/11/02 PHP
php 定义404页面的实现代码
2012/11/19 PHP
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
JavaScript的目的分析
2007/01/05 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
python中字符串前面加r的作用
2015/06/04 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
SQL Server面试题
2016/10/17 面试题
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
高级Java程序员面试要点
2013/08/02 面试题
前台文员个人求职信范文
2014/01/05 职场文书
仓库规划计划书
2014/04/28 职场文书
监理中标通知书
2015/04/16 职场文书
党委工作总结2015
2015/04/27 职场文书
解决Oracle数据库用户密码过期
2022/05/11 Oracle