<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VVVGG</title>
<link rel="stylesheet" type="text/css" href="lesson1.css">
<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div style="width: 50px;height: 50px;background-color: red;position: absolute;left: 0;top: 0;"></div>
</body>
<script src="lesson.js" type="text/javascript" charset="utf-8">
</script>
</html>
var div = document.getElementsByTagName('div')[0];
var disX,
disY;
function elemDrag(elem) {
addEvent(elem, 'mousedown', mousedown);
function mousedown(event) {
var e = event || window.event;
disX = e.pageX - parseInt(elem.style.left);
disY = e.pageY - parseInt(elem.style.top);
addEvent(document, 'mousemove', mousemove);
addEvent(document, 'mouseup', mouseup);
}
function mousemove(event) {
var e = event || window.event;
elem.style.left = e.pageX - disX + 'px';
elem.style.top = e.pageY - disY + 'px';
}
function mouseup() {
removeEvent(document, 'mousemove', mousemove);
}
}
//针对不同浏览器，绑定事件函数
function addEvent (elem, type, handle) {
if(elem.addEventListener) {
elem.addEventListener(type, handle, false);
}else if(elem.attachEvent){
elem.attachEvent('on' + type, function () {
handle.call(elem);
})
}else{
elem['on' + type] = handle;
}
}
//针对不同浏览器，解除绑定事件函数
function removeEvent (elem, type, handle) {
if(elem.removeEventListener) {
elem.removeEventListener(type, handle, false);
}else if(elem.detachEvent) {
elem.detachEvent('on' + type, function () { handle.call(elem); });
}else{
elem['on' + type] = null;
}
}
elemDrag(div);