站内搜索: 请输入搜索关键词

当前页面: 开发资料首页Javascript 专题Img 图像拖拽功能的实现

Img 图像拖拽功能的实现

摘要: Img 图像拖拽功能的实现
基本知识

  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为空,这样就完成了用鼠标拖拽图像的过程。


↑返回目录
前一篇: 利用Javascript建立Web应用
后一篇: 建立各种版本兼容网页