等虚线框的拖拽

最新推荐文章于 2024-07-23 11:32:13 发布

djrk76507

最新推荐文章于 2024-07-23 11:32:13 发布

阅读量147

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/qibingshen/p/5413874.html

版权

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{border: 3px solid yellow; position: absolute;}
#div1{width: 100px; height: 100px; background: red; position: absolute;}
</style>
<script type="text/javascript">

window.onload = function(){
dragDown('div1');
};
function dragDown(id){
var oDiv = document.getElementById(id);
var disX = 0; //用于记住鼠标按下时左侧鼠标和浏览器边框的距离减去 div距离浏览器边框的距离
var disY = 0; //用于记住鼠标按下时顶部鼠标和浏览器边框的距离减去 div距离浏览器边框的距离

oDiv.onmousedown = function(ev){
var oEvent = ev||event;
disX=oEvent.clientX-oDiv.offsetLeft; //div内部鼠标距离div边框的左侧距离
disY=oEvent.clientY-oDiv.offsetTop //div内部鼠标距离div边框的顶部距离

var oNewDiv=document.createElement('div'); //创建一个div 用保证拖动的时间有虚线框出现
oNewDiv.className='box'; //为了新创建的div添加样式
oNewDiv.style.width=oDiv.offsetWidth+'px'; //把要拖动的物体的宽度赋值给创建的div
oNewDiv.style.height=oDiv.offsetHeight+'px';
oNewDiv.style.left=oDiv.style.left; //把要拖得的物体的left值赋值给创建的div
oNewDiv.style.top=oDiv.style.top;
document.body.appendChild(oNewDiv); //把创建好的div添加到页面里边去

if(oDiv.setCapture){ //利用IE的事件捕获解决IE鼠标按下选中文字的默认事件
oDiv.οnmοusemοve= fnMove;
oDiv.onmouseup = fnUp;

oDiv.setCapture();
}else{ //谷歌和火狐解决默认鼠标按下方案
document.οnmοusemοve= fnMove;
document.onmouseup = fnUp;
}

function fnMove(ev){ //把取消按下时间封装成函数
var oEvent = ev||event; //时间对象
var l = oEvent.clientX-disX; //鼠标移动事件移动时用鼠标距离浏览器的边框距离减去div内鼠标的距离
var t = oEvent.clientY-disY;

if (l<50){ //不能div脱离游览器当小于0是直接复制为0 //小于50 就贴上去可以做磁性吸附的感觉
l=0;
} else if (l>document.documentElement.clientWidth-oDiv.offsetWidth){
l=document.documentElement.clientWidth-oDiv.offsetWidth;
} //如何移动的距离大于浏览器宽度减去div本身的宽度则把浏览器宽度减去div本身的宽度赋值给鼠标移动的距离

if (t<0){ //同理就是顶部距离
t=0;
} else if (t>document.documentElement.clientHeight-oDiv.offsetHeight){
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}

oNewDiv.style.left=l+'px';
oNewDiv.style.top=t+'px';
}

function fnUp(){
this.οnmοusemοve=null; //弹起时把移动事件清空
this.οnmοuseup=null; //弹起时把按下事件清空
if(this.releaseCapture){
this.releaseCapture(); //如果是IE则存在时间捕获所以取消
}
document.body.removeChild(oNewDiv); //鼠标抬起时把创建的div删除掉
oDiv.style.left=oNewDiv.style.left; //创建的div的位置赋值给要移动的物体
oDiv.style.top=oNewDiv.style.top;
}
return false; //把默认的鼠标按下时间屏蔽掉
};
}
</script>
</head>
<body>
文字字字
<div id="div1">拖拽</div>
</body>
</html>

转载于:https://www.cnblogs.com/qibingshen/p/5413874.html

djrk76507

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
等虚线框的拖拽

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>.box{border: 3px solid yellow; position: absolute;}#div1{width: 100px; h...
复制链接

扫一扫