脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js简单div拖拽功能

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">&nbsp;</div>
<div id="div2" style="left:170px; background-color:#408080"></div>
<script type="text/javascript">
<!--
 drag("div1");
 drag("div2");
-->
</script>
</body>
</html>

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

您可能感兴趣的文章:

相关文章

  • javascript下动态this与动态绑定实例代码

    javascript下动态this与动态绑定实例代码

    javascript是一门动态语言，最明显就是那个dynamic this。它一般都是作为函数调用者存在。在javascript，所有关系都可以作为对象的一个关联数组元素而存在。
    2010-01-01
  • JS实现来回出现文字的状态栏特效代码

    JS实现来回出现文字的状态栏特效代码

    这篇文章主要介绍了JS实现来回出现文字的状态栏特效代码,针对文字的定义及状态栏的定时显示等实现方法备有详细的文字说明,需要的朋友可以参考下
    2015-10-10
  • 关于js二维数组和多维数组的定义声明(详解)

    关于js二维数组和多维数组的定义声明(详解)

    下面小编就为大家带来一篇关于js二维数组和多维数组的定义声明(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 简述JavaScript提交表单的方式 （Using JavaScript Submit Form）

    简述JavaScript提交表单的方式 （Using JavaScript Submit Form）

    这篇文章主要介绍了简述JavaScript提交表单的方式 （Using JavaScript Submit Form）的相关资料,需要的朋友可以参考下
    2016-03-03
  • js实现div色块碰撞

    js实现div色块碰撞

    这篇文章主要为大家详细介绍了js实现div色块碰撞，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-01-01
  • echarts堆叠柱状图柱子之间间隔开具体实现代码

    echarts堆叠柱状图柱子之间间隔开具体实现代码

    ECharts是一个强大的数据可视化库,它的堆叠柱状图通常用于比较各个分类的数据总量,这篇文章主要给大家介绍了echarts堆叠柱状图柱子之间间隔开具体实现的相关资料,需要的朋友可以参考下
    2024-11-11
  • JavaScript面向对象之私有静态变量实例分析

    JavaScript面向对象之私有静态变量实例分析

    这篇文章主要介绍了JavaScript面向对象之私有静态变量,结合实例形式分析了私有静态变量的定义与使用方法,需要的朋友可以参考下
    2016-01-01
  • 利用JS如何获取form表单数据

    利用JS如何获取form表单数据

    这篇文章主要给大家介绍了关于利用JS如何获取form表单数据的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-12-12
  • js Canvas绘制圆形时钟教程

    js Canvas绘制圆形时钟教程

    这篇文章主要为大家详细介绍了js Canvas绘制圆形时钟教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • js实现炫酷的烟花效果

    js实现炫酷的烟花效果

    这篇文章主要为大家详细介绍了js实现炫酷的烟花效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论