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 判断数组是否已包含了某个元素的函数
May 30 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
JavaScript中的惰性载入函数及优势
Feb 18 Javascript
vue实现购物车结算功能
Jun 18 Javascript
javascript遍历对象的五种方式实例代码
Oct 24 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
php使用PDO方法详解
2014/12/27 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
python实现逆波兰计算表达式实例详解
2015/05/06 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
python库matplotlib绘制坐标图
2019/10/18 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
如何用python 操作zookeeper
2020/12/28 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
家长对老师的评语
2014/04/18 职场文书
离职报告格式
2014/11/04 职场文书
三下乡个人总结
2015/03/04 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
个人维稳承诺书
2015/05/04 职场文书
公司年会开场白
2015/06/01 职场文书
五一晚会主持词
2015/07/01 职场文书
中秋节主题班会
2015/08/14 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
python百行代码实现汉服圈图片爬取
2021/11/23 Python