拖动
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#fdiv{
width: 400px;
height: 400px;
border: 1px solid gray;
position: absolute;
top: 100px;
left: 100px;
}
#sdiv{
width: 100px;
height: 100px;
background-color: green;
margin: 0 auto;
box-shadow: 1px 1px 1px 2px red inset,1px 1px 1px 2px gray;
}
#sdiv:hover{
cursor: all-scroll;
}
</style>
</head>
<body>
<div id="fdiv">
<div id="sdiv"></div>
</div>
<script>
var fdiv = document.getElementById('fdiv');
var sdiv = document.getElementById('sdiv');
var eventUtil = {
addHander: function(element, type, hander){
if(window.addEventListener){
element.addEventListener(type, hander, false);
}else if(window.attachEvent){
element.attachEvent('on'+type, hander);
}else{
element['on'+type] = hander;
}
},
removeHander: function(element, type, hander){
if(window.addEventListener){
element.removeEventListener(type, hander, false);
}else if(window.attachEvent){
element.detachEvent('on'+type, hander);
}else{
element['on'+type] = null;
}
},
getEvent: function(event){
return event?event:window.event;
},
getElement: function(event){
return event.target || event.srcElement;
},
preventDefault: function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
stopPropagation: function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
};
window.onload = drag;
function drag(){
var screenX = document.documentElement.clientWidth;
var screenY = document.documentElement.clientHeight;
console.log(screenX)
console.log(screenY)
eventUtil.addHander(sdiv, 'mousedown', mouseDown);
var startX = 0, startY = 0;
function mouseDown(){
var oEvent = eventUtil.getEvent(event);
startX = oEvent.clientX - fdiv.offsetLeft;
startY = oEvent.clientY - fdiv.offsetTop;
eventUtil.addHander(document, 'mousemove', mouseMove);
eventUtil.addHander(document, 'mouseup', mouseUp);
}
function mouseUp(){
eventUtil.removeHander(document, 'mousemove', mouseMove);
}
function mouseMove(){
var oEvent = eventUtil.getEvent(event);
var x = oEvent.clientX;
var y = oEvent.clientY;
console.log(x - startX)
if(x - startX <= 0 || y - startY <= 0 || x - startX+fdiv.offsetWidth>=screenX || y - startY+fdiv.offsetHeight>=screenY){
}else{
fdiv.style.top = y - startY + 'px';
fdiv.style.left = x - startX + 'px';
}
}
}
</script>
</body>
</html>