Img 图像拖拽功能的实现
时间：2007-02-17 来源：PHP爱好者
基本知识
SP(active server pages)是一种服务器端脚本编写环境，使用ASP可以组合HTML页、脚本命令(VbScript, JavaScript)以创建交互的Web页和基于Web的功能强大的应用程序。ASP很容易学习掌握，即使您是一个编程经验并不丰富的程序员。如果您是位具有一定编程经验的HTML编写人员，您会发现ASP脚本提供了创建交互页的简便方法。在学会使用 Microsoft Active Server Pages 后，就可以使用自己的 Web 服务器创建并运行动态的交互式 Web 站点。您可以用 VBScript 创建脚本，也可以用 JavaScript。
在用HTML制作主页时，设计者可以把一些小程序嵌入其页中，在运行的时候，这些小程序就被下载执行。JavaScript就是这样一种语言。它是一种不严格的以Java为基础的被解释的语言。JavaScript程序被存储在HTML页中的资源窗体中，在运行时，具有JavaScript的页（.asp）被下载到浏览器并且JavaScript被解释和运行。
这次向大家介绍如何用JavaScript语言实现图像的拖拽，并且跟踪该图像的位置。这种方法很实用。当用户移动图像之后系统能够自动地判断出每个图像的位置，并且将其保存起来。在数据库操作中，由用户自己制定审批顺序就是一个例子。如图1所示。
实现方法
一、做出四幅Img图像
首先在画笔工具中做出几幅图像，然后在Frontpage 98中插入这几幅图像，注意：您必须设置出图像的name属性，在后面我们会用到这一属性。
二、分别创建三个函数
下面具体介绍这三个函数：
A．DoMouseDown函数
当鼠标左键按下时执行该函数。
函数功能描述：如果鼠标左键被按下，并且选中的对象类型是“IMG”图像，则取出所选图像的name属性。存入变量CurElement，得到当前对象。
源代码：
function doMouseDown()
{
if ((event.button==1) && (event.srcElement.tagName=="IMG"))
CurElement = event.srcElement;
}
B. DoMouseMove函数
当鼠标左键按下并且移动时执行该程序。
函数功能描述：当鼠标左键按在一个“IMG”图像上，并且鼠标在移动时，得到图像的左上点位置坐标。
源代码：
function doMouseMove(){
if ((event.button==1) && (CurElement!=null))
{ // position IMG
newleft= event.clientX-document.all.OuterDiv.offsetLeft-(CurElement.offsetWidth/2)；
//自动调整图像横坐标位置
if (newleft<0) newleft=0
CurElement.style.pixelLeft=newleft；
newtop=event.clientY-document.all.OuterDiv.offsetTop-(CurElement.offsetHeight/2)；
//自动调整图像纵坐标位置
if (newtop<0) newtop=0
curElement.style.pixelTop= newtop；
event.returnValue = false；
event.cancelBubble = true；
}
//把当前图像的位置存入相应变量中
if (CurElement.name=="wlf" ){
wx=newleft;
wy=newtop;
}
if (CurElement.name=="czh" ){
cx=newleft;
cy=newtop;
}
if (CurElement.name=="pxy" ){
px=newleft;
py=newtop;
}
if (CurElement.name=="sl" ){
sx=newleft;
sy=newtop;
}
}
由于每一个图像有一个name，因此每移动完毕一个图像后，根据当前图像名字，把该图像的坐标保存在一对变量中。
C.函数new Function("curElement=null")
函数功能：通过把变量CurElement置为空来释放当前对象。
三、调用函数
按顺序执行以下函数：
Var curElement,wx,wy,cx,cy,sx,sy,px,py;
document.onmousedown = DoMouseDown;
document.onmousemove = DoMouseMove;
document.onmouseup = new Function("CurElement =null")
用户每次用鼠标左键选中一幅图像时，DoMouseDown函数执行，CurElement得到当前图像。当鼠标移动时，DoMouseMove函数执行。当鼠标左键松开后，DoMouseMove函数失效，CurElement为空，这样就完成了用鼠标拖拽图像的过程。
php爱好者站 http://www.phpfans.net PHP|MySQL|javascript|ajax|html.
SP(active server pages)是一种服务器端脚本编写环境，使用ASP可以组合HTML页、脚本命令(VbScript, JavaScript)以创建交互的Web页和基于Web的功能强大的应用程序。ASP很容易学习掌握，即使您是一个编程经验并不丰富的程序员。如果您是位具有一定编程经验的HTML编写人员，您会发现ASP脚本提供了创建交互页的简便方法。在学会使用 Microsoft Active Server Pages 后，就可以使用自己的 Web 服务器创建并运行动态的交互式 Web 站点。您可以用 VBScript 创建脚本，也可以用 JavaScript。
在用HTML制作主页时，设计者可以把一些小程序嵌入其页中，在运行的时候，这些小程序就被下载执行。JavaScript就是这样一种语言。它是一种不严格的以Java为基础的被解释的语言。JavaScript程序被存储在HTML页中的资源窗体中，在运行时，具有JavaScript的页（.asp）被下载到浏览器并且JavaScript被解释和运行。
这次向大家介绍如何用JavaScript语言实现图像的拖拽，并且跟踪该图像的位置。这种方法很实用。当用户移动图像之后系统能够自动地判断出每个图像的位置，并且将其保存起来。在数据库操作中，由用户自己制定审批顺序就是一个例子。如图1所示。
实现方法
一、做出四幅Img图像
首先在画笔工具中做出几幅图像，然后在Frontpage 98中插入这几幅图像，注意：您必须设置出图像的name属性，在后面我们会用到这一属性。
二、分别创建三个函数
下面具体介绍这三个函数：
A．DoMouseDown函数
当鼠标左键按下时执行该函数。
函数功能描述：如果鼠标左键被按下，并且选中的对象类型是“IMG”图像，则取出所选图像的name属性。存入变量CurElement，得到当前对象。
源代码：
function doMouseDown()
{
if ((event.button==1) && (event.srcElement.tagName=="IMG"))
CurElement = event.srcElement;
}
B. DoMouseMove函数
当鼠标左键按下并且移动时执行该程序。
函数功能描述：当鼠标左键按在一个“IMG”图像上，并且鼠标在移动时，得到图像的左上点位置坐标。
源代码：
function doMouseMove(){
if ((event.button==1) && (CurElement!=null))
{ // position IMG
newleft= event.clientX-document.all.OuterDiv.offsetLeft-(CurElement.offsetWidth/2)；
//自动调整图像横坐标位置
if (newleft<0) newleft=0
CurElement.style.pixelLeft=newleft；
newtop=event.clientY-document.all.OuterDiv.offsetTop-(CurElement.offsetHeight/2)；
//自动调整图像纵坐标位置
if (newtop<0) newtop=0
curElement.style.pixelTop= newtop；
event.returnValue = false；
event.cancelBubble = true；
}
//把当前图像的位置存入相应变量中
if (CurElement.name=="wlf" ){
wx=newleft;
wy=newtop;
}
if (CurElement.name=="czh" ){
cx=newleft;
cy=newtop;
}
if (CurElement.name=="pxy" ){
px=newleft;
py=newtop;
}
if (CurElement.name=="sl" ){
sx=newleft;
sy=newtop;
}
}
由于每一个图像有一个name，因此每移动完毕一个图像后，根据当前图像名字，把该图像的坐标保存在一对变量中。
C.函数new Function("curElement=null")
函数功能：通过把变量CurElement置为空来释放当前对象。
三、调用函数
按顺序执行以下函数：
Var curElement,wx,wy,cx,cy,sx,sy,px,py;
document.onmousedown = DoMouseDown;
document.onmousemove = DoMouseMove;
document.onmouseup = new Function("CurElement =null")
用户每次用鼠标左键选中一幅图像时，DoMouseDown函数执行，CurElement得到当前图像。当鼠标移动时，DoMouseMove函数执行。当鼠标左键松开后，DoMouseMove函数失效，CurElement为空，这样就完成了用鼠标拖拽图像的过程。
php爱好者站 http://www.phpfans.net PHP|MySQL|javascript|ajax|html.
相关阅读 更多 +
