<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
window.οnlοad=function ()
{
var oDiv=document.getElementById('div1');
var disX=0;
var disY=0;
oDiv.οnmοusedοwn=function (ev)
{
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;
document.οnmοusemοve=function (ev)
{
var oEvent=ev||event;
oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};
document.οnmοuseup=function ()
{
document.οnmοusemοve=null;
document.οnmοuseup=null;
};
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
这个拖拽可以扔到不可视区域,放开鼠标就找不到了,并且移动速度快和移动到浏览器头部的时候,会出现问题。
oDiv[i].onmousedown = function (ev){ onmousemove...... onmouseup..... ev.preventDefault(); //加上这个就可以了,取消默认事件 也可以写作return false; }
你给每个div里面加上几个字,然后拖动的时候你会发现原因的,当a移动到b下面的时候,b有被选中的默认效果,一种方法呢是先在空白处点击下取消被选中状态,然后在移动元素第二种就是我提供的方法 ev.preventDefault();,取消事件的默认行为,拖动就不会选中文字或块了。
给拖拽的元素添加条件使其无法移出可视区域
<script> window.οnlοad=function () { var oDiv=document.getElementById('div1'); var disX=0; var disY=0; oDiv.οnmοusedοwn=function (ev) { var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLeft; disY=oEvent.clientY-oDiv.offsetTop; document.οnmοusemοve=function (ev) { var oEvent=ev||event; var l=oEvent.clientX-disX; var t=oEvent.clientY-disY; if(l<0) { l=0; } else if(l>document.documentElement.clientWidth-oDiv.offsetWidth) { l=document.documentElement.clientWidth-oDiv.offsetWidth; } if(t<0) { t=0; } else if(t>document.documentElement.clientHeight-oDiv.offsetHeight) { t=document.documentElement.clientHeight-oDiv.offsetHeight; } oDiv.style.left=l+'px'; oDiv.style.top=t+'px'; }; document.οnmοuseup=function () { document.οnmοusemοve=null; document.οnmοuseup=null; }; return false; }; }; </script>