js实现简单div拖拽功能实例


Posted in Javascript onMay 12, 2015

本文实例讲述了js实现简单div拖拽功能的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<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">
div{
 position:absolute;
 width:150px;
 height:150px;
 background-color:#C8FFFF;
}
</style>
<script type="text/javascript">
<!--
function drag(obj)
{
 if (typeof obj == "string") {
 var obj = document.getElementById(obj);
 obj.orig_index=obj.style.zIndex;
 //设置当前对象永远显示在最上层
 }
 obj.onmousedown=function (a){
 //鼠标按下
 this.style.cursor="move";
 //设置鼠标样式
 this.style.zIndex=1000;
  var d=document;
 if(!a) a=window.event;
 //按下时创建一个事件
 var x=a.clientX-document.body.scrollLeft-obj.offsetLeft;
 //x=鼠标相对于网页的x坐标-网页被卷去的宽-待移动对象的左外边距
 var y=a.clientY-document.body.scrollTop-obj.offsetTop;
 //y=鼠标相对于网页的y左边-网页被卷去的高-待移动对象的左上边距
 d.onmousemove=function(a){//鼠标移动
  if(!a) a=window.event;//移动时创建一个事件
  obj.style.left=a.clientX+document.body.scrollLeft-x;
  obj.style.top=a.clientY+document.body.scrollTop-y;
 }
 d.onmouseup=function (){//鼠标放开
  document.onmousemove=null;
  document.onmouseup = null;
  obj.style.cursor="normal";//设置放开的样式
  obj.style.zIndex=obj.orig_index;
 }
 } 
}
-->
</script>
</head>
<body>
<div id="div1"> </div>
<div id="div2" style="left:170px; background-color:#408080"></div>
<script type="text/javascript">
<!--
 drag("div1");
 drag("div2");
-->
</script>
</body>
</html>

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

Javascript 相关文章推荐
JavaScript 对话框和状态栏使用说明
Oct 25 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 Javascript
js实现两点之间画线的方法
May 12 #Javascript
jquery简单实现图片切换效果的方法
May 12 #Javascript
浅谈javascript的分号的使用
May 12 #Javascript
JS中Location使用详解
May 12 #Javascript
js获取微信版本号的方法
May 12 #Javascript
javascript中基本类型和引用类型的区别分析
May 12 #Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 #Javascript
You might like
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
javascript中怎么做对象的类型判断
2013/11/11 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
Python如何import文件夹下的文件(实现方法)
2017/01/24 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
python dict乱码如何解决
2020/06/07 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
后勤工作职责
2013/12/22 职场文书
怎样写好创业计划书的内容
2014/02/06 职场文书
大学社团活动总结
2014/04/26 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
导游词300字
2015/02/13 职场文书
初中语文教学反思范文
2016/03/03 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android