<!DOCTYPE html>
<html>
<head lang="en">
???<meta charset="UTF-8">
???<title>拖拽原生js</title>
<style>
#box1{
??????????? width: 100px;
??????????? height: 100px;
??????????? background-color: #ffff00;
??????????? position: absolute;
??????? }
???</style>
???<script>
??????? window.onload=function(){
??????????? var oDiv=document.getElementById("box1");
//onmousedown:鼠标按下 选择元素
??????????? //onmousemove:移动元素
??????????? //onmouseup:鼠标释放 释放元素
??????????? oDiv.onmousedown=function(ev){
??????????????? var oEvent=ev||event;
??????????????? var disX=oEvent.clientX-oDiv.offsetLeft;
??????????????? //鼠标在div中的左边的的距离=鼠标的横坐标-div的left值
??????????????? var disY=oEvent.clientY-oDiv.offsetTop;
??????????????? document.onmousemove=function(ev){
??????????????????? var oEvent=ev||event;
??????????????????? oDiv.style.left=oEvent.clientX-disX+‘px‘;
??????????????????? oDiv.style.top=oEvent.clientY-disY+‘px‘;
??????????????? };
?????????????? document.onmouseup=function(){
??????????????????? document.onmousemove=null;
??????????????????? document.onmouseup=null;
??????????????????//在释放之后，下次操作要全部清空再操作，而不是再move的基础上重复操作
??????????????????// document.onmousedown=null;
???????????????}
???????????}
???????}
???</script>
</head>
<body>
???<div id="box1"></div>
</body>
</html>
图片拖拽原生js
原文地址：http://www.cnblogs.com/mylove0/p/7464842.html