<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>拖拽</title>
</head>
<body>
<style>
.left {
display: inline-block;
position: absolute;
}
body {
margin: 0;
padding: 0;
}
</style>
<image class="left" draggable="false" src="https://raw.githubusercontent.com/zhaoolee/ChineseBQB/master/001Funny_%E6%BB%91%E7%A8%BD%E5%A4%A7%E4%BD%AC%F0%9F%98%8FBQB/Funny00018.gif"></image>
<image class="left" draggable="false" src="https://raw.githubusercontent.com/zhaoolee/ChineseBQB/master/001Funny_%E6%BB%91%E7%A8%BD%E5%A4%A7%E4%BD%AC%F0%9F%98%8FBQB/0.gif"></image>
<image class="left" draggable="false" src="https://raw.githubusercontent.com/zhaoolee/ChineseBQB/master/001Funny_%E6%BB%91%E7%A8%BD%E5%A4%A7%E4%BD%AC%F0%9F%98%8FBQB/Funny00010.gif"></image>
<script>
// 跨浏览器的事件处理工具
var EventUtil = {
addHandler: function(element, type, handle){
// 如果存在DOM2级方法
if(element.addEventListener){
// 第三个参数false表示在冒泡阶段进行处理
element.addEventListener(type, handle, false);
// 如果运行在IE浏览器
} else if(element.attachEvent){
element.attachEvent("on" + type, handle);
// 使用古老的DOM级方法
} else {
element["on" + type] = handler;
}
},
removeHandler: function(element, type, handle){
// 如果存在DOM2级方法
if(element.removeEventListener){
// 第三个参数false表示在冒泡阶段进行处理
element.removeEventListener(type, handle, false);
// 如果运行在IE浏览器
} else if(element.detachEvent){
element.detachEvent("on" + type, handle);
// 使用古老的DOM级方法
} else {
element["on" + type] = null;
}
},
getTarget: function (event) {
return event.target || event.srcElement;
}
}
// 让红色正方形跟随鼠标
var target_element = null;
var diff_x = 0;
var diff_y = 0;
function follow_mouse(event){
if(event.type === "mousedown") {
target_element = EventUtil.getTarget(event);
diff_x = event.clientX - target_element.offsetLeft;
diff_y = event.clientY - target_element.offsetTop;
}
if(event.type === "mouseup") {
target_element = null;
}
if(target_element !== null && event.type === "mousemove") {
target_element.style.left = (event.clientX - diff_x) + "px";
target_element.style.top = (event.clientY - diff_y) + "px";
}
}
EventUtil.addHandler(document, "mousemove", follow_mouse);
EventUtil.addHandler(document, "mouseup", follow_mouse);
EventUtil.addHandler(document, "mousedown", follow_mouse);
</script>
</body>
</html>
