带框的拖拽,拖动红色div时,div先不移动,而是出现一个虚线框,虚线框移动到哪儿,放开鼠标后div就移动到哪儿。效果如下:
总体思路:当鼠标按下时,创建一个虚线框box。鼠标移动时,将坐标赋值给虚线框。鼠标方放开时,将虚线框的坐标赋值给div,随即删除掉虚线框。示例代码如下。
<!DOCTYPE html>
<html>
<head>
<title>拖拽</title>
<style type="text/css">
#div1{ height: 200px; width: 200px; background-color: red; position: absolute; }
.box{ border:1px dashed black; position: absolute;}
</style>
<script type="text/javascript">
window.onload = function(){
document.oncontextmenu = function(){
return false;
}
var oDiv1 = document.getElementById('div1');
var disX = 0;
var disY = 0;
oDiv1.onmousedown = function(ev){
disX = ev.clientX - oDiv1.offsetLeft;
disY = ev.clientY - oDiv1.offsetTop;
var oBox = document.createElement('div');
oBox.className = 'box';
oBox.style.width = oDiv1.offsetWidth+'px';
oBox.style.height = oDiv1.offsetHeight+'px';
oBox.style.left = oDiv1.offsetLeft+'px';
oBox.style.top = oDiv1.offsetTop+'px';
document.body.appendChild(oBox);
//当鼠标按下时,创建一个虚线框box,创建的虚线框的位置和div的位置一致。
document.onmousemove = function(ev){
var l = ev.clientX - disX;
var t = ev.clientY - disY;
if (l<30) {
l = 0;
} else if(l>document.documentElement.clientWidth-oDiv1.offsetWidth){
l = document.documentElement.clientWidth-oDiv1.offsetWidth;
}
if (t<30) {
t = 0;
} else if(t>document.documentElement.clientHeight-oDiv1.offsetHeight){
t = document.documentElement.clientHeight-oDiv1.offsetHeight;
}
oBox.style.left = l + 'px';
oBox.style.top = t + 'px';
//鼠标移动时,将坐标赋值给虚线框。
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
oDiv1.style.left = oBox.offsetLeft+'px';
oDiv1.style.top = oBox.offsetTop+'px';
document.body.removeChild(oBox);
//鼠标方放开时,将虚线框的坐标赋值给div,随即删除掉虚线框。
};
return false;
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>