用原生js写一个拖拽，需要考虑到兼容的问题，事件绑定的问题，浏览器默认事件的问题。
首先需要用到Event 对象，代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>拖拽</title>
<style>
div{
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 0;
left: 0;
}
</style>
<script>
//这是前面封装过的domReady
function domReady(fn){
if(document.addEventListener){
document.addEventListener('DOMContentLoaded',function(){
fn&&fn();//处理事情
},false);
}else{
/*监控资源情况，ie8及以下不支持addEventListener*/
document.onreadystatechange=function(){
/*dom加载完成的时候*/
if(document.readyState=='complete'){
fn&&fn();//处理事情
}
};
}
}
//事件绑定兼容
function addEvent(obj,oEvn,fn){
if(obj.addEventListener){
obj.addEventListener(oEvn,fn,false);
}else{
obj.attachEvent('on'+oEvn,fn);
}
}
//解除事件绑定
function removeEvent(obj,oEvn,fn){
if(obj.removeEventListener){
obj.removeEventListener(oEvn,fn,false);
}else{
obj.detachEvent('on'+oEvn,fn);
}
}
domReady(function(){
var oBox=document.getElementById('div1');
function down(ev){
var oEvent = ev || event;
var disX=oEvent.clientX-oBox.offsetLeft;
var disY=oEvent.clientY-oBox.offsetTop;
function move(ev){
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;
if(l<0){
l=0;
}
if(l>document.documentElement.clientWidth-oBox.offsetWidth){
l=document.documentElement.clientWidth-oBox.offsetWidth;
}
if(t<0){
t=0;
}
if(t>document.documentElement.clientHeight-oBox.offsetHeight){
t=document.documentElement.clientHeight-oBox.offsetHeight;
}
oBox.style.left=l+'px';
oBox.style.top=t+'px';
}
function up(){
removeEvent(document,"mousemove",move);
removeEvent(document,"mouseup",up);
//释放捕获
oBox.releaseCapture && oBox.releaseCapture();
}
addEvent(document,"mousemove",move);
addEvent(document,"mouseup",up);
//设置捕获
oBox.setCapture && oBox.setCapture();
//阻止浏览器默认事件
oEvent.preventDefault && oEvent.preventDefault();
return false;
}
addEvent(oBox,"mousedown",down);
});
</script>
</head>
<body>
<div id="div1"></div>
<p>拖拽取消浏览器默认事件</p>
</body>
</html>
可以兼容ie低版本，拖拽的同时取消了浏览器默认事件，不会选中文字。
网友评论