jQuery控制Div拖拽效果完整实例分析


Posted in Javascript onApril 15, 2015

本文实例讲述了jQuery控制Div拖拽效果的方法。分享给大家供大家参考。具体如下:

<!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>
<style>
#Drigging {
width:200px;
background:#CCC;
border:solid 1px #666;
height:80px;
line-height:80px;
text-align:center;
position:absolute;
}
</style>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){ 
var bool=false; //标识是否移动元素
var offsetX=0; //声明DIV在当前窗口的Left值
var offsetY=0; //声明DIV在当前窗口的Top值
$("#Drigging").mouseover(function(){
$(this).css('cursor','move');
//当鼠标移动到拖拽的DIV上的时候,将鼠标的样式设置为移动(move)
})
$("#Drigging").mousedown(function(){ 
 bool=true;
 //当鼠标在移动元素按下的时候将bool设定为true
 offsetX = event.offsetX;
 //获取鼠标在当前窗口的相对偏移位置的Left值并赋值给offsetX
  offsetY = event.offsetY;
  //获取鼠在当前窗口的相对偏移位置的Top值并赋值给offsetY
 $(this).css('cursor','move');
 }).mouseup(function(){
bool=false;
//当鼠标在移动元素起来的时候将bool设定为false
})
$(document).mousemove(function(){
if(!bool)//如果bool为false则返回
return;
//当bool为true的时候执行下面的代码
var x = event.clientX-offsetX;
//event.clientX得到鼠标相对于客户端正文区域的偏移
//然后减去offsetX即得到当前推拽元素相对于当前窗口的X值
//(减去鼠标刚开始拖动的时候在当前窗口的偏移X)
var y = event.clientY-offsetY;
//event.clientY得到鼠标相对于客户端正文区域的偏移
//然后减去offsetX即得到当前推拽元素相对于当前窗口的Y值
//(减去鼠标刚开始拖动的时候在当前窗口的偏移Y)
$("#Drigging").css("left", x);
$("#Drigging").css("top", y);
$("#Drigging").css('cursor','move');
})
})
</script>
  </head>
  <body>
    <div id="Drigging" style="float:left">
      拖拽层
    </div>
  </body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
简单的JS多重继承示例
Mar 13 Javascript
JS 分号引起的一段调试问题
Jun 18 Javascript
在JavaScript中获取请求的URL参数
Dec 22 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
JavaScript实现的选择排序算法实例分析
Apr 14 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
详细解密jsonp跨域请求
Apr 15 #Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 #Javascript
javascript中Math.random()使用详解
Apr 15 #Javascript
js数组依据下标删除元素
Apr 14 #Javascript
js获取数组的最后一个元素
Apr 14 #Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 #Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 #Javascript
You might like
PHP4和PHP5共存于一系统
2006/11/17 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
JS对象创建的几种方式整理
2017/02/28 Javascript
bootstrap table表格使用方法详解
2017/04/26 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
vue实现文件上传功能
2018/08/13 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
python rsa 加密解密
2017/03/20 Python
django输出html内容的实例
2018/05/27 Python
把pandas转换int型为str型的方法
2019/01/29 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
python字符串判断密码强弱
2020/03/18 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
法学个人求职信范文
2014/01/27 职场文书
求职信范文怎么写
2014/01/29 职场文书
干部个人考察材料
2014/12/24 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
MySQL root密码的重置方法
2021/04/21 MySQL
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android