JavaScript+HTML+css 拖拽框
JavaScript-code:
;(function(){
function Drag(opt){
this.dragEle = document.getElementsByClassName(opt.dragEle)[0];
this.dragBox = document.getElementsByClassName(opt.dragBox)[0];
this.x = 0;
this.y = 0;
_self = this;
this.addEvent(this.dragEle,'mousedown',_self.mouseDown);
};
Drag.prototype = {
mouseDown:function(e){
var e = e || window.event,
styles = _self.getStyles(_self.dragBox),
pagePos = _self.pagePos(e);
_self.x = pagePos.x - parseInt(styles.left);
_self.y = pagePos.y - parseInt(styles.top);
_self.addEvent(document,'mousemove',_self.mouseMove);
_self.addEvent(document,'mouseup',_self.mouseUp);
},
mouseMove:function(e){
var e = e || window.event,
styles = _self.getStyles(_self.dragBox),
pagePos = _self.pagePos(e),
viewWidth = _self.getViewPort().width,
viewHeight = _self.getViewPort().height,
sMaxLeft = viewWidth - parseInt(styles.width),
sMaxTop = viewHeight - parseInt(styles.height);
_self.dragBox.style.left = _self.pagePos(e).x - _self.x + 'px';
_self.dragBox.style.top = _self.pagePos(e).y - _self.y + 'px';
if(parseInt(styles.left) <= 0){
_self.dragBox.style.left = 1+'px';
}
if(parseInt(styles.top) <= 0){
_self.dragBox.style.top = 1+'px';
}
if(parseInt(styles.left) >= sMaxLeft){
_self.dragBox.style.left = sMaxLeft-1+'px';
}
if(parseInt(styles.top) >= sMaxTop){
_self.dragBox.style.top = sMaxTop-1+'px';
}
},
mouseUp:function(e){
var e = e || window.event;
_self.removeEvenet(document,'mousemove',_self.mouseMove);
_self.removeEvenet(this.dragEle,'mouseup',_self.mouseUp);
},
addEvent:function(ele,type,fn){
if(typeof(ele.addEventListener) === 'function'){
ele.addEventListener(type,fn,false);
}else if(ele.attachEvent){
ele.attachEvent('on' + type,fn);
}else{
ele['on'+type] = fn;
}
},
removeEvenet:function(ele,type,fn){
if(typeof(ele.addEventListener) === 'function'){
ele.removeEventListener(type,fn,false);
}else if(ele.detachEvent){
ele.detachEvent('on' + type,fn);
}else{
ele['on'+type] = null;
}
},
pagePos:function(e){
var sLeft = _self.getScrollOffset().left,
sTop = _self.getScrollOffset().top,
cTop = document.documentElement.clientTop,
cLeft = document.documentElement.clientLeft;
return {
x : e.clientX + sLeft - cLeft,
y : e.clientY + sTop - cTop
}
},
getStyles:function(ele,prop){
if(window.getComputedStyle){
if(prop){
return parseInt(window.getComputedStyle(ele,null)[prop])? parseInt(window.getComputedStyle(ele,null)[prop]):0;
}else{
return window.getComputedStyle(ele,null);
}
}else{
if(prop){
return parseInt(document.currentStyle[prop])?document.currentStyle[prop]:0;
}else{
return document.currentStyle;
}
}
},
getScrollOffset:function(){
if(window.pageXOffset){
return {
'left':window.pageXOffset,
'top':window.pageYOffset
}
}else{
return {
'left':document.documentElement.scrollLeft + document.body.scrollLeft,
'top':document.documentElement.scrollTop + document.body.scrollTop
}
}
},
getViewPort:function(){
if(window.innerWidth){
return {
width:window.innerWidth,
height:window.innerHeight
}
}else{
if(document.compatMode === 'BackCompat'){
return{
width:document.body.clientWidth,
height:document.body.clientHeight
}
}else{
return{
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
}
}
}
}
};
window.Drag = Drag;
}())
HTML-code:
<body>
<div class="wrapper">
<div class="box">
<div class="box-hd">
<h3>消息框</h3>
</div>
<div class="box-content">
<ul class="box-list"></ul>
</div>
</div>
</div>
<script type="text/javascript" src='plugins/drag/js/drag.js'></script>
<script type="text/javascript">
var drag = new Drag({
'dragEle':'box-hd',
'dragBox':'box'
});
</script>
</body>
CSS-code:
common.css:----------------
body{
margin: 0;
padding: 0;
}
ul{
padding: 0px;
margin: 0px;
}
li{
padding: 0px;
margin: 0px;
}
h1,
h2,
h3,
h4,
h5,
h6{
padding: 0px;
margin: 0px;
}
drag.css------------------
.wrapper{
position: absolute;
bottom: 0px;
top: 0px;
width: 100%;
height: 100%;
background-image: url('../img/body-bg.jpg');
background-repeat:no-repeat;
background-size:100% 100%;
}
.box{
position: absolute;
top: 20%;
left: 35%;
width: 400px;
height: auto;
border-radius: 10px;
}
.box-hd{
width: 100%;
height: 50px;
background-color: #00BFFF;
cursor: move;
}
.box-hd h3{
color: #FFFFFF;
text-align: center;
line-height: 50px;
}
.box-content{
width: 100%;
height: 300px;
background-color: #ffffff;
}