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 相关文章推荐
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
微信小程序五星评分效果实现代码
Apr 06 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
JavaScript箭头函数_动力节点Java学院整理
Jun 28 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
vue+openlayers绘制省市边界线
Dec 24 Vue.js
详细解密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
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
PHP 变量定义和变量替换的方法
2009/07/30 PHP
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
2014/08/21 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
python中栈的原理及实现方法示例
2019/11/27 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
Android面试宝典
2013/08/06 面试题
社会实践感言
2014/01/25 职场文书
2014全国两会心得体会
2014/03/17 职场文书
初三学生个人自我评定
2014/04/06 职场文书
推广普通话主题班会
2015/08/17 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
Python进度条的使用
2021/05/17 Python
spring cloud 配置中心native配置方式
2021/09/25 Java/Android
python神经网络Xception模型
2022/05/06 Python