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与C# Windows应用程序交互方法
Jun 29 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
Js 获取当前函数参数对象的实现代码
Jun 20 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 Javascript
TS 类型收窄教程示例详解
Sep 23 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
我的论坛源代码(四)
2006/10/09 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
python实现获取序列中最小的几个元素
2014/09/25 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
党校自我鉴定范文
2013/10/02 职场文书
汽车运用工程毕业生自荐信
2013/10/29 职场文书
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
小区文明倡议书
2014/05/16 职场文书
公司承诺书格式
2014/05/21 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
高三教师工作总结2015
2015/07/21 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript