虚構付きドラッグ
実はこの原理も簡単です.つまり、マウスを押すと要素の周囲に虚枠が現れ、マウスを動かすと虚枠だけが移動し、要素は移動せず、マウスを持ち上げると、直接要素を虚枠位置に移動し、虚枠が消える.
例:
CSSコード:
JSコード:
例:
CSSコード:
*{margin:0;padding:0;}
#div1{width:100px;height: 100px;background: red;position: absolute;left:10px;top:10px;}
#vbox{width:98px;height: 98px;position: absolute;left:10px;top:10px;border: 1px dashed black;display: none;}JSコード:
window.onload = function () {
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('vbox');
oDiv1.onmousedown = function (ev) {
drag(this,oDiv2,ev);
return false;
}
};
//
function drag(objReal,objVir,ev)// ev obj {
var pos = getPos(ev);
var disX = pos.x - objReal.offsetLeft;
var disY = pos.y - objReal.offsetTop;
objVir.style.display = 'block';
document.onmousemove = function (ev) // ev document {
var pos = getPos(ev); //
var l = pos.x - disX; //(l,t)
var t = pos.y - disY;
//
if(l<0)
l = 0;
else if(l > document.documentElement.clientWidth - objVir.offsetWidth)
l = document.documentElement.clientWidth - objVir.offsetWidth;
if(t<0)
t = 0;
else if(t > document.documentElement.clientHeight - objVir.offsetHeight)
t = document.documentElement.clientHeight - objVir.offsetHeight;
//
objVir.style.left = l + 'px';
objVir.style.top = t + 'px';
};
document.onmouseup = function () {
document.onmousemove = null; //
document.onmouseup = null; // null
objVir.style.display = 'none';
//
objReal.style.left = objVir.style.left;
objReal.style.top = objVir.style.top;
if(objReal.releaseCapture) //
objReal.releaseCapture();
};
if(objReal.setCapture) // obj
objReal.setCapture();
}
//
function getPos(ev) {
var oEvent = ev||event; //
// ， , oEvent.clientX .
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
return {x:oEvent.clientX + scrollLeft,y:oEvent.clientY + scrollTop};// JSON
}