简单的AJAX拖拽代码,感兴趣的朋友可以看看
复制内容到剪贴板
代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body { margin:0px; }
#one { width:200px; height:160px; border:1px #000000 solid; background:#FFFFFF; }
#two { width:200px; height:160px; border:1px #000000 solid; background:#000000; }
</style>
</head>
<body>
<div id="one">
</div>
<div id="two">
</div>
</body>复制内容到剪贴板
代码:
<script>
function $(id){
return document.getElementById(id);
}
function dragDiv(id, zIndex){
var drag = {
isIe: window.navigator.userAgent.indexOf("MSIE") != -1,
$: function(){
return document.getElementById(id);
},
move: function(event){
event = event || window.event;
nMouseX = event.clientX || event.pageX;
nMouseY = event.clientY || event.pageY;
document.onselectstart=function(){return false;}
if(this.id && isDrag == true){
this.style.left = lx + nMouseX - mouseX + 'px';
this.style.top = tx + nMouseY - mouseY + 'px';
}
},
down: function(event){
event = event || window.event;
mouseX = event.clientX || event.pageX;
mouseY = event.clientY || event.pageY;
isDrag = true;
wx = this.offsetWidth - mouseX;
hx = this.offsetHeight - mouseY
lx = this.offsetLeft;
tx = this.offsetTop;
if(!_self.isIe)this.style.MozOpacity = "1";
if(_self.isIe)this.style.filter = "alpha(opacity=100)";复制内容到剪贴板
代码:
if(document.getElementById('blackboard') != null){
document.body.removeChild($('blackboard'));
}
nDiv = document.createElement('div');
nDiv.id = 'blackboard';
document.body.appendChild(nDiv);
$('blackboard').style.background = '#000000';
$('blackboard').style.position = 'absolute';
$('blackboard').style.top = '0';
$('blackboard').style.left = '0';
if(_self.isIe){
$('blackboard').style.width = document.documentElement.offsetWidth;
$('blackboard').style.height = document.documentElement.offsetHeight;
$('blackboard').style.filter = "alpha(opacity=70)";
}else{
$('blackboard').style.width = document.documentElement.scrollWidth + 'px';
$('blackboard').style.height = document.documentElement.scrollHeight + 'px';
$('blackboard').style.MozOpacity = "0.5";
}
this.style.zIndex = "999";
this.style.cursor = "move";
this.style.position = "absolute";
},
up: function(){
isDrag = false;
if(!_self.isIe)this.style.MozOpacity = "1";
if(_self.isIe)this.style.filter = "alpha(opacity=100)";
document.body.removeChild(nDiv);
this.style.zIndex = zIndex;
this.style.cursor = "default";
}
};复制内容到剪贴板
代码:
var $ = function(){
return document.getElementById(id);
};
var move = function(event){
event = event || window.event;
nMouseX = event.clientX || event.pageX;
nMouseY = event.clientY || event.pageY;
if(this.id && isDrag == true){
this.style.left = lx + nMouseX - mouseX + 'px';
this.style.top = tx + nMouseY - mouseY + 'px';
}
};
var down = function(event){
event = event || window.event;
mouseX = event.clientX || event.pageX;
mouseY = event.clientY || event.pageY;
isDrag = true;
wx = this.offsetWidth - mouseX;
hx = this.offsetHeight - mouseY
lx = this.offsetLeft;
tx = this.offsetTop;
if(!ie)this.style.MozOpacity = "1";
if(ie)this.style.filter = "alpha(opacity=100)";
this.style.zIndex = "999";
this.style.cursor = "move";
this.style.position = "absolute";
};
var up = function(){
isDrag = false;
if(!ie)this.style.MozOpacity = "1";
if(ie)this.style.filter = "alpha(opacity=100)";
this.style.zIndex = zIndex;
this.style.cursor = "default";
};
var _self = drag;
var isDrag = wx = hx = lx = tx = 0;
_self.$(id).onmousemove = _self.move;
_self.$(id).onmousedown = _self.down;
_self.$(id).onmouseup = _self.up;
_self.$(id).style.zIndex = zIndex;
}
dragDiv('one',2);
dragDiv('two',1);
</script>
</html>