可以用鼠标拖动的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 相关文章推荐
基于jQuery的360图片展示实现代码
Jun 14 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
jQuery实现文件上传进度条特效
Aug 12 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
js创建数组的简单方法
Jul 27 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
Nov 06 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 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
9个经典的PHP代码片段分享
2014/12/18 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
新手该如何学python怎么学好python?
2008/10/07 Python
python字符串的常用操作方法小结
2016/05/21 Python
python协程之动态添加任务的方法
2019/02/19 Python
python cumsum函数的具体使用
2019/07/29 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
银行开业庆典方案
2014/02/06 职场文书
体育教学随笔感言
2014/02/24 职场文书
反邪教警示教育方案
2014/05/13 职场文书
关于责任的演讲稿
2014/05/20 职场文书
环保项目建议书
2014/08/26 职场文书
体检通知范文
2015/04/21 职场文书
2015年党总支工作总结
2015/05/25 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript