ASP 实现图片自由拖动

ASP 实现图片自由拖动

代码如下：

用javascript

去研究一下WEB2.0 这不是ASP的功能

对客观存在的实现非常简单。
将图片定义一个绝对的层定位。比如写在一个绝对关系的层上也可以。
在IE和NS下用window.event进行事件收集，收集到鼠标按下事件，并在事件中判断中否该位置在图片上。如果不是，则不进行任何处理。如果是记录下当前鼠标位置。
设置鼠标移动事件。用图层的位置跟参鼠标移动。也就是说鼠标移动到哪，层跟随到哪儿。
设置鼠标放下事件，取得当前的鼠标位置后，将层设置到该位置就可以了！这个层的位置不是等于鼠标的位置。而是相对于鼠标的位置，也就是其运动路径才与鼠标按下时运动相同。
三个事件的源码如下：
function checkFocus(x,y){
stalkerX = document.P_02.pageX;
stalkerY = document.P_02.pageY;
stalkerWidth = document.P_02.clip.width;
stalkerHeight = docuemnt.P_02.clip.height;

if((x > stalkerX && x < (stalkerX+stalkerWidth)) && (y > stalkerY && y < (stalkerY+stalkerHeight))) return true;
else return false;
}//该函数是为NS检查焦点用的!
function grabIt(e){
if(NS) {//NS浏览器
window.captureEvents(Event.MOUSEMOVE);//捕获事件源;
if(checkFocus(e.pageX,e.pageY)){
whichIt = document.P_02;
StalkerTouchedX = e.pageX-document.P_02.pageX;
StalkerTouchedY = e.pageY-document.P_02.pageY;
}
}
else{//如果是IE浏览器
whichIt = event.srcElement;
while(whichIt.id.indexOf("P_02")== -1){
whichIt = whichIt.parentElement;
if(whichIt == null) return true;
}//遍历事件源节点的父节点,查找定位事件源为P_02;也就是说只要是P_02内的所有元素都可引起

whichIt.parentElement.style.pixelTop = whichIt.parentElement.offsetTop;
whichIt.parentElement.style.pixelLeft = whichIt.parentElement.offsetLeft;

currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
}
return true;
}//该函数用以记录按下MOUSE时的位置!

function moveIt(e) {
if (whichIt == null) { return false; }
if(NS) {
whichIt.parentElement.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
if(whichIt.parentElement.left < 0+self.pageXOffset) whichIt.parentElement.left = 0+self.pageXOffset;
if(whichIt.parentElement.top < 0+self.pageYOffset) whichIt.parentElement.top = 0+self.pageYOffset;
if( (whichIt.parentElement.left + whichIt.parentElement.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.parentElement.left = ((window.innerWidth+self.pageXOffset)-whichIt.parentElement.clip.width)-17;
if( (whichIt.parentElement.top + whichIt.parentElement.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.parentElement.top = ((window.innerHeight+self.pageYOffset)-whichIt.parentElement.clip.height)-17;
return false;
}
else {
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX); distanceY = (newY - currentY);
currentX = newX; currentY = newY;
whichIt.parentElement.style.pixelLeft += distanceX;
whichIt.parentElement.style.pixelTop += distanceY;
if(whichIt.parentElement.style.pixelTop < document.body.scrollTop) whichIt.parentElement.style.pixelTop = document.body.scrollTop;
if(whichIt.parentElement.style.pixelLeft < document.body.scrollLeft) whichIt.parentElement.style.pixelLeft = document.body.scrollLeft;
if(whichIt.parentElement.style.pixelLeft > (document.body.offsetWidth - document.body.scrollLeft - whichIt.parentElement.style.pixelWidth - 20)) whichIt.parentElement.style.pixelLeft = document.body.offsetWidth - whichIt.parentElement.style.pixelWidth - 20;
if(whichIt.parentElement.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.parentElement.style.pixelHeight - 5) whichIt.parentElement.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.parentElement.style.pixelHeight - 5;
event.returnValue = false;
}
return false;
}//记录鼠标移动轨迹

function dropIt() {
whichIt = null;
if(NS) window.releaseEvents (Event.MOUSEMOVE);
return true;
}//释放鼠标的方法
当然，这几个事件的加入方法如下：
注：NS为测试出的浏览类型。NS=document.layer?1:0，先对浏览器进行了测试。
if(NS) {
window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
window.onmousedown = grabIt;
window.onmousemove = moveIt;
window.onmouseup = dropIt;
}
else {
document.onmousedown = grabIt;
document.onmousemove = moveIt;
document.onmouseup = dropIt;
}
else中为IE的加入方法。这样你可以试一下！这个程序我自己写后经过IE5+，和NS的测试的。如果有什么不对的地方可以反馈给我！ p_02是拖动图片层，而p_02的父层就是图片的父层，运动是依靠的父图层，焦点计算的是P_02层。这样，如果父层中有其他元素时也可以跟前运动。我作的是一个视窗运动效果，P_02层相当于标题栏的，而其父层中还有其他的内容。这样的效果就相当于你拖动标题栏时整个视窗在运动。如果你是不一个图片，可以考虑不使用父层，自己修改一下，会更个性的！