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 相关文章推荐
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
jQuery动态添加
Apr 07 Javascript
简单实现js浮动框
Dec 13 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
JS造成内存泄漏的几种情况实例分析
Mar 02 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 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
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
PHP模板解析类实例
2015/07/09 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
vue2里面ref的具体使用方法
2017/10/27 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
Python无头爬虫下载文件的实现
2020/04/02 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
复古服装:RetroStage
2019/05/10 全球购物
会计助理岗位职责
2014/02/17 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
英语求职信范文
2014/05/23 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
科技活动周标语
2014/10/08 职场文书
流动人口婚育证明
2014/10/19 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS