本文主要和大家分享js实现带框的拖拽效果,主要以代码的形式和大家分享,希望能帮助到大家。
Document#box {
width:100px;
height:100px;
background:#ff0099;
position:absolute;
}
.box1 {
border:1px solid #000000;
position:absolute;
}
var box = document.getElementById('box');
box.onmousedown = function(e){
var box1 = document.createElement("p");
document.body.appendChild(box1);
box1.style.width = box.offsetWidth + 'px';
box1.style.height = box.offsetHeight + 'px';
box1.style.left = box.offsetLeft + 'px';
box1.style.top = box.offsetTop + 'px';
box1.className = 'box1';
e = e || event;
//计算鼠标在盒子中的位置;
var x = e.pageX - box.offsetLeft;
var y = e.pageY - box.offsetTop;
document.onmousemove = function(e){
e = e || event;
//计算盒子在页面上的坐标;
var xx = e.pageX - x;
var yy = e.pageY - y;
box1.style.left = xx + 'px';
box1.style.top = yy + 'px';
document.onmouseup = function(){
box.style.left = box1.offsetLeft + 'px';
box.style.top = box1.offsetTop + 'px';
document.body.removeChild(box1);
document.onmousemove = 'null';
}
return false;
}
}