可以用鼠标拖动的DIV实现思路及代码


Posted in Javascript onOctober 21, 2013
<html><head> 
<title>测试可动div</title> 
<script language='javascript' type='text/javascript'> 
var offset_x; 
var offset_y; 
function Milan_StartMove(oEvent) 
{ 
var whichButton; 
if(document.all&&oEvent.button==1) whichButton=true; 
else { if(oEvent.button==0)whichButton=true;} 
if(whichButton) 
{ 
var oDiv=document.getElementById("oDiv"); 
offset_x=parseInt(oEvent.clientX-oDiv.offsetLeft); 
offset_y=parseInt(oEvent.clientY-oDiv.offsetTop); 
document.documentElement.onmousemove=function(mEvent) 
{ 
var eEvent; 
if(document.all) eEvent=event; 
else{eEvent=mEvent;} 
var oDiv=document.getElementById("oDiv"); 
var x=eEvent.clientX-offset_x; 
var y=eEvent.clientY-offset_y; 
oDiv.style.left=(x)+"px"; 
oDiv.style.top=(y)+"px"; 
} 
} 
} 
function Milan_StopMove(oEvent){document.documentElement.onmousemove=null; } 
</script> 
</head> 
<body> 
<div id="oDiv" onmousedown="Milan_StartMove(event)" onmouseup="Milan_StopMove(event)" style="cursor:move;position:absolute;width:100px;height:60px;border:1px solid 
silver;left:100px;top:100px;z-index:9999;"></div> 
</body></html>

document.all[]是文档中所有标签组成的一个数组变量,包括了文档对象中所有元素;
event.button的值:0没按键 1按左键 2按右键 3按左和右键 4按中间键 5按左和中间键 6按右和中间键 7按所有的键

下面对此代码进行改进,模仿window,并且让它可以盖住select

<!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> 
<title>测试可动div</title> 
<script language='javascript' type='text/javascript'> 
var offset_x; 
var offset_y; 
function Milan_StartMove(oEvent,div_id) 
{ 
var whichButton; 
if(document.all&&oEvent.button==1) whichButton=true; 
else { if(oEvent.button==0)whichButton=true;} 
if(whichButton) 
{ 
var oDiv=div_id; 
offset_x=parseInt(oEvent.clientX-oDiv.offsetLeft); 
offset_y=parseInt(oEvent.clientY-oDiv.offsetTop); 
document.documentElement.onmousemove=function(mEvent) 
{ 
var eEvent; 
if(document.all) eEvent=event; 
else{eEvent=mEvent;} 
var oDiv=div_id; 
var x=eEvent.clientX-offset_x; 
var y=eEvent.clientY-offset_y; 
oDiv.style.left=(x)+"px"; 
oDiv.style.top=(y)+"px"; 
var d_oDiv=document.getElementById("disable_"+oDiv.id); 
d_oDiv.style.left=(x)+"px"; 
d_oDiv.style.top=(y)+"px"; 
} 
} 
} 
function Milan_StopMove(oEvent){document.documentElement.onmousemove=null; } 
function div_Close(o) 
{var oDiv=o; oDiv.style.display="none";var d_oDiv=document.getElementById("disable_"+o.id);d_oDiv.style.display="none";} 
</script> 
</head> 
<body> 
<div id="oDiv" style="position:absolute;width:100px;height:60px;border:1px solid silver;left:100px;top:100px;z-index:9999;"> 
<div id="move" onmousedown="Milan_StartMove(event,this.parentNode)" onmouseup="Milan_StopMove(event)" 
style="cursor:move;width:100%;height:15px;background-color:#0066cc; font-size:10px;"> 
<div onclick="div_Close(this.parentNode.parentNode)" style="float:right; width:10px; height:100%; cursor:hand; background-color:#cc3333; color:White;font-size:15px;">X</div> 
</div> 
<span>测试一下</span> 
</div> 
<div id="disable_oDiv" style="position:absolute;left:100px;top:100px;width:100px; height:60px; z-index:9998;FILTER:alpha(opacity=50);";> 
<iframe src="about:blank" name="hiddenIframe" width="100%" frameborder="0" height="60px" title="遮盖层"></iframe></div> 
<select name="ListHead1$DropDownList3" id="ListHead1_DropDownList3"> 
<option selected="selected" value=""></option> 
<option value="2">3333</option> 
<option value="6">1111</option> 
<option value="B">222</option> 
</select> 
</body> 
</html>

现在这个可拖动的div是不是好很多了?不用担心select了。之前放出来的只能在IE下正常工作,主要是用了parentElement,现在我把它换成parentNode,调整了CSS样式,这样在FF下也能正常运行了。
Javascript 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
jquery数组之存放checkbox全选值示例代码
Dec 20 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
javascript 实现 原路返回
Jan 21 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
Jul 04 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
JS中的多态实例详解
Oct 15 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
VuePress 静态网站生成方法步骤
Feb 14 Javascript
vue实现购物车案例
May 30 Javascript
JS中的this变量的使用介绍
Oct 21 #Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 #Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 #Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 #Javascript
JS操作Cookie写入和读取实例代码
Oct 20 #Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 #Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 #Javascript
You might like
php 如何获取数组第一个值
2013/08/06 PHP
Javascript的闭包
2009/12/31 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
详解js中的几种常用设计模式
2020/07/16 Javascript
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
python爬取淘宝商品详情页数据
2018/02/23 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
python如何制作缩略图
2019/04/30 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
入党自我评价范文
2014/02/02 职场文书
施工工地安全标语
2014/06/07 职场文书
2014年国庆节演讲稿
2014/09/19 职场文书
新闻人物通讯稿
2014/10/09 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
创业计划书之书店
2019/09/10 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
详解Python类和对象内容
2021/06/22 Python
2022年四月新番
2022/03/15 日漫