拖动控件 javascript原生，兼容IE6-11、chrome、firefox、Opera、Safari
鼠标拖动元素，对于初学者来说，是一个很难的话题，其实只要应用好事件，就能很好的控制拖动的对象,其主要事件是 mousedown，mousemove，mouseup，其原理是在鼠标点击元素时，在给定鼠标的移动事件和鼠标弹起的事件，很多人都习惯，在元素中添加鼠标按下、鼠标移动和鼠标弹起事件，这样多数会造成鼠标拖动过快，元素反而跟不上鼠标，出现脱离鼠标，鼠标弹起也不能定位到指定位置。这样就需要在鼠标按下事件中添加鼠标移动和鼠标弹起事件，（这是我做这个拖动时遇到的问题，如果有什么不对请大家指出！！！）
下面是拖动组件的源码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>darg</title>
</head>
<body>
<script type="text/javascript">
;var Drag = (function(window){
return {
init: function(options) {
var defaults=new Object();
for(elements in this.defaults){
defaults[elements]=this.defaults[elements]
}
defaults.tDarg=document.getElementById(options.tDarg);
defaults.bDarg=document.getElementById(options.bDarg);
defaults.opacity=options.opacity;
defaults.flag = options.flag;
Drag.setCss.call(defaults.tDarg,{"position":"absolute","cursor":"move"});
Drag.setCss.call(defaults.bDarg,{"position":"absolute"});
var lib = this;
if(!!defaults.tDarg.addEventListener){
defaults.tDarg.addEventListener("mousedown",function(e){
lib.beforeDrag.call(defaults.bDarg,e,defaults);
window.addEventListener("mousemove",function(e){lib.onDrag.call(defaults.tDarg,e,defaults)},false);
window.addEventListener("mouseup",function(e){lib.endDrag.call(defaults.tDarg,e,defaults)},false);
},false);
}else{
defaults.tDarg.attachEvent("onmousedown",function(e){
lib.beforeDrag.call(defaults.bDarg,e,defaults);
document.attachEvent("onmousemove",function(e){lib.onDrag.call(defaults.tDarg,e,defaults)});
document.attachEvent("onmouseup",function(e){lib.endDrag.call(defaults.tDarg,e,defaults)});
});
}
},
defaults:{
tDarg:null,
bDarg:null,
opacity: 100,
flag: true,
elem:[],
dowOrUp:false
},
setCss: function(cObj){
for(var c in cObj){
this.style[c]=cObj[c];
}
},
setOpacity: function(opacity){
if(window.addEventListener){
this.style.opacity = opacity / 100;
}else{
this.filters.alpha.opacity = opacity;
}
},
beforeDrag: function(e,objdefaule){
var e = e || window.event;
if(objdefaule.elem.length>1) return ;
if((window.addEventListener && e.button==0) || (!window.addEventListener && e.button==1)){
if (e.preventDefault) {
e.preventDefault();
e.stopPropagation();
}
objdefaule.dowOrUp=true;
var clone=this.cloneNode(true);
clone.style.zIndex=Drag.getZIndex();
this.style.zIndex=Drag.getZIndex()+1;
clone.removeAttribute("id");
this.parentNode.appendChild(clone);
Drag.setOpacity.call(this,objdefaule.opacity);
objdefaule.elem.push({lib:this,obj:clone,startX:e.clientX,startY:e.clientY,startLeft:this.offsetLeft,startTop:this.offsetTop});
}
},
onDrag: function(e,objdefaule){
var e = e || window.event;
if(!window.addEventListener){
e.returnValue = false;
}
if(objdefaule.dowOrUp){
for(var i=0; i<objdefaule.elem.length; i++){
objdefaule.elem[i].lib.style.left=e.clientX-objdefaule.elem[i].startX+objdefaule.elem[i].startLeft+ "px";
objdefaule.elem[i].lib.style.top =e.clientY-objdefaule.elem[i].startY+objdefaule.elem[i].startTop +"px";
}
}
},
endDrag: function(e,objdefaule){
if(objdefaule.dowOrUp){
var i=0;
while(objdefaule.elem.length>0){
objdefaule.elem[i].obj.style.left=objdefaule.elem[i].lib.style.left;
objdefaule.elem[i].obj.style.top =objdefaule.elem[i].lib.style.top;
Drag.setOpacity.call(Drag.defaults.elem[i].lib,100)
objdefaule.elem[i].obj.parentNode.removeChild(objdefaule.elem[i].obj)
objdefaule.elem.shift();
}
Drag.defaults.dowOrUp=false;
}
},
getZIndex: function(){
var zindex = 1;
var div = document.getElementsByTagName("DIV");
for(var i = 0 ;i < div.length; i++){
if(parseInt(zindex)<parseInt(div[i].style.zIndex)){
zindex=parseInt(div[i].style.zIndex);
}
}
return parseInt(zindex);
}
}
})(window);
window.onload=function(){
Drag.init({tDarg:"objtitle2",bDarg:"objbody2",opacity: 50, flag: true});
Drag.init({tDarg:"objtitle3",bDarg:"objbody3",opacity: 50, flag: true});
Drag.init({tDarg:"objtitle",bDarg:"objbody",opacity: 50, flag: true});
Drag.init({tDarg:"objtitle4",bDarg:"objbody4",opacity: 50, flag: true});
}
</script>
<div id="objbody4" style="filter:alpha(opacity=100);opacity:1;width:200px;height:150px; border:1px solid #f00;background:#020200; float:left; margin-left:-10px">
<div id="objtitle4" style="background-color:#f00;width:200px; height:30px;background:#f0f">biaoti1</div>
</div>
<div id="objbody" style="filter:alpha(opacity=100);opacity:1;width:198px; height:150px; border:1px solid #06C; border-top:0;position:fixed;left:600px;">
<div id="objtitle" style="background-color:#06C;width:200px; height:30px;position:fixed; ">biaoti2</div>
</div>
<div id="objbody3" style="filter:alpha(opacity=100);opacity:1;width:198px; height:150px; border:1px solid #00f; border-top:0; position:relative;left:200px;">
<div id="objtitle3" style="background-color:#00f;width:200px; height:30px;position:relative;">biaoti3</div>
</div>
<div id="objbody2" style="filter:alpha(opacity=100);opacity:1;width:198px; height:150px; border:1px solid #f00; border-top:0; position:absolute;left:400px">
<div id="objtitle2" style="background-color:#f00;width:200px; height:30px;position:absolute;">biaoti4</div>
</div>
<div style="position:absolute">
</div>
</body>
</html>
拖动控件 javascript原生，兼容IE6-11、chrome、firefox、Opera、Safari的更多相关文章
- [完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器
截至自2017-08-11,支持现世已出的几乎所有PC端浏览器版本判断. 受支持的PC端浏览器列表: Edge IE Chrome Firefox Opera Safari QQ浏览器 360系列浏览 ...
- JavaScript日历控件！JS兼容IE6.7.FF.可挡住下拉控件
原文发布时间为:2009-08-22 -- 来源于本人的百度文章 [由搬家工具导入] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
- wxpython 中 用鼠标拖动控件 总结
#encoding: utf-8 import wx import os import noname class Frame( noname.MyFrame1 ): def __init__(self ...
- win10 uwp 拖动控件
我们会使用控件拖动,可以让我们做出好看的动画,那么我们如何移动控件,我将会告诉大家多个方法.其中第一个是最差的,最后的才是我希望大神你去用. Margin 移动 我们可以使用Margin移动,但这是w ...
- atitit.提升开发效率---使用server控件生命周期 asp.net 11个阶段 java jsf 的6个阶段比較
atitit.提升开发效率---使用server控件生命周期 asp.net 11个阶段 java jsf 的6个阶段比較 例如以下列举了server控件生命周期所要经历的11个阶段. (1)初始 ...
- 兼容IE6/IE7/IE8/FireFox的css hack
兼容IE6/IE7/IE8/FireFox的css hack .color{ background-color: #CC00FF; background-color: #FF00009; *backg ...
- javascript 框架、根基技巧、布局、CSS、控件 JavaScript 类库
预筹备之 JavaScript 今朝支流的 JavaScript 框架排名中,jQuery 和 Ext 可算是佼佼者,得到了用户的普遍好评.海内的一些框架许多也是模仿 jQuery 对 JavaScr ...
- Microsoft ReportViewer 控件类型版本兼容问题及解决方法
错误 Parser Error Message: The base class includes the field 'rvEquipment', but its type (Microsoft.Re ...
- 通过setMouseTracking实现用鼠标拖动控件
1 import sys 2 from PyQt5.Qt import * 3 4 class Mwindow(QWidget): 5 leftclick = False 6 7 def __init ...
随机推荐
- nginx的upstream目前支持5种方式的分配(转)
nginx的upstream目前支持5种方式的分配 1.轮询(默认) 每个请求按时间顺序逐一分配到不同的后端服务器,如果后端服务器down掉,能自动剔除. 2.weight 指定轮询几率,weight ...
- OpenMP的简单使用教程
转自:http://binglispace.com/2015/01/09/openmp-intro/ OpenMP的简单使用教程 今天有幸参加了一个XSEDE OpenMP的workshop讲座,真是 ...
- IAP沙盒测试帐号无法购买的问题
1,创建一个美国的iap测试帐号 2,啪的一声从哪个地方拔出你的ios设备,设置 -> Itunes Store和 App Store -> 点击Apple ID ->注销 3,运行 ...
- Core Java Volume I — 4.7. Packages
4.7. PackagesJava allows you to group classes in a collection called a package. Packages are conveni ...
- hdu 5190 Building Blocks
问题描述 看完电影后,乐乐回家玩起了积木. 他已经搭好了n堆积木,他想通过调整积木,使得其中有连续W堆积木具有相同的高度,同时他希望高度恰好为H. 乐乐的积木都这了,也就是说不能添加新的积木,只能移动 ...
- UVa 10900 - So you want to be a 2n-aire?
题目大意: 一个答题赢奖金的问题,玩家初始的金额为1,给出n,表示有n道题目,t表示说答对一道题目的概率在t到1之间,每次面对一道题,可以选择结束游戏,获得当前奖金:回答下一道问题,答对的概率p在t到 ...
- Xcode编译异常和警告汇总(持续更新中)
1.Method definition for 'xxx' not found xxx的方法没有实现 出现原因.h声明了xxx方法但是.m没有实现xxx方法 解决方法:在类的.m文件实现xxx方法 ...
- 无密码通过ssh执行rsync
默认情况下,在执行rsync命令时通常需要我们输入密码.但有时我们并不希望如此,那么如何实现无密码执行rsync呢? 1. 测试通过ssh可以执行rsync(需要密码) 执行rsync,确保你帐户的密 ...
- 使用Spring Aop验证方法参数是否合法
先定义两个注解类ValidateGroup 和 ValidateFiled ValidateGroup .java package com.zf.ann; import java.lang.annot ...
- docker容器互联
link方式 http://blog.csdn.net/halcyonbaby/article/details/42112325 通过link方式创建容器,然后我们可以使用被link容器的别名进行访问 ...