js实现简单div拖拽功能实例
更新时间：2015年05月12日 14:46:11 作者：vivi
这篇文章主要介绍了js实现简单div拖拽功能的方法,实例分析了javascript针对div层拖拽的实现技巧,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
简单实用的网页表格特效...2006-07-07
中文乱码在Java Web开发中经常出现，这是由于不同的部分编码不一样造成的，一般在开发中，我们把所有能设编码的地方，全部设置成UTF-8，但是有时候还是会出现乱码的情况。下面通过本文给大家分享JS外部文件中文注释出现乱码的解决方案，一起看看吧2017-07-07
javascript 学习笔记，一些简单的小技巧，学习js的朋友可以看下。2010-11-11
这篇文章主要介绍了Webpack中雪碧图插件使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了微信小程序封装自定义弹窗的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
在js中，闭包是一个很重要又相当不容易完全理解的要点,下面这篇文章主要给大家介绍了关于闭包在js中充当着什么角色的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-01-01
这篇文章主要给大家介绍了关于three.js中文文档学习之通过模块导入的相关资料，文中通过示例代码介绍的非常详细，对大家学习或使用three.js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-11-11
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
checked属性在IE下不能正确实现的问题2009-07-07
本篇文章主要是对超简单JS二级、多级联动的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
本文主要分享了使用原生JavaScript实现自定义浏览器滚动条兼容IE、 火狐和chrome的思路与方法，具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
最新评论