用XML和XSLT进行高级的Web UI设计（四）
编译:alpha2002
目录树节点的拖放操作
本文要求读者熟悉JScript，MSXML，XSL/XSLT，DOM。
第一篇：使用XML和XSL进行高级的Web UI设计--创建目录树
第二篇：使用XML和XSL进行高级的Web UI设计--定制目录树的上下文菜单
第三篇：使用XML和XSL进行高级的Web UI设计--目录树的管理
上述文章发表在《VCKBASE在线杂志》第十四期的XML栏目，分别介绍了目录树的创建、定制目录树的上下文菜单以及目录树节点的管理，如添加、删除、修改操作等。本文是这一系列文章的第四篇，主要介绍目录树的拖放操作（Drag-and- Drop）。拖放是图形用户界面操作的一个典型特色。本文是根据前面几篇文章所讨论的内容为基础，示范如何扩展目录树的界面功能。实现拖放功能，所有的操作都在客户端实现，本文所指的客户端是IE5.5+。
下面是实现客户端拖放操作的关键代码：
function DragControl() {
this.entity = null;
this.target = null;
this.origin = null;
this.enabled = false;
this.beginX = null;
this.beginY = null;
this.beginDrag = beginDrag;
this.endDrag = endDrag;
this.setTarget = setTarget;
this.setPosition = setPosition;
this.move = move;
this.reset = reset;
}
拖放控制涉及到的属性和方法包括：
一、属性
entity——entity 属性包含对被移动对象的引用，不管此对象在其当前树中还是在其它树中，此属性在beginDrag()方法中设置。
target——target 属性包含对当前用户拖拽目标的引用。当用户在实体上移动时，此属性被修改。在setTarget()方法中设置此属性。
origin——origin 属性包含对对象所在原文件夹的引用。如果鼠标拖拽的对象没有目标，则鼠标左键释放后实体回复到原位置。此属性在beginDrag()方法中设置。
enabled——enabled 属性初始化实际的拖拽操作。当用户选中实体拖拽鼠标移动时，这个属性被置为true。在例子代码中，拖拽范围的初始值是5个象素。此属性在move()方法中设置。
beginX——此属性为初始化拖拽例程时鼠标的X坐标。此属性在beginDrag() 方法中设置。
beginY——此属性为初始化拖拽例程时鼠标的Y坐标。此属性在beginDrag() 方法中设置。
二、方法
beginDrag()
定义：
function beginDrag(obj) {
if(window.event.button == 1)
{
document.onmousemove = function anonymous() { dragControl.move(obj) };
this.origin = obj.parentNode;
this.entity = obj;
this.beginX = window.event.x;
this.beginY = window.event.y;
window.event.cancelBubble = true;
}
}
此方法在XSLT式样页文件中使用。如图一所示：
图一 beginDrag() 方法的位置
此方法首先检查鼠标，以便保证用左键激活事件，而右键用于上下文菜单。然后在客户浏览器中设置适当的属性值。
endDrag()
定义：
function endDrag() {
if(this.entity != null) {
this.entity.style.position = "static";
this.entity.style.left = null;
this.entity.style.top = null;
this.entity = this.entity.removeNode(true);
if(this.target != null) {
dragControl.target.appendChild(this.entity);
if(this.target.open != "true") {
clickOnEntity(this.target);
}
}
else {
this.origin.appendChild(this.entity);
}
document.onmousemove = null;
document.onmouseup = null;
this.entity = null;
this.target = null;
this.enabled = false;
}
}
此方法首先保证只有一个实体被选中。根据当前是否有选中的目的地，决定是将实体返回原位置（没有选择目的地）还是将实体移到新的位置（选择了一个目的地）。此方法在XSLT式样页文件中使用。如图二所示：
图二 endDrag() 方法位置
setTarget()
定义：
function setTarget(obj) {
if(this.entity != null && this.entity != obj) {
this.target = obj;
}
window.event.cancelBubble = true;
}
此方法保证存在一个当前的实体，并且选中的实体不是被移动的实体。然后设置DragControl 的target属性，然后在客户浏览器中进行cancelBubble 处理。此方法在XSLT式样页文件中使用。如图三所示：
图三setTarget() 方法位置
setPosition()
定义：
function setPosition() {
this.entity.style.left = window.event.x;
this.entity.style.top = window.event.y - 10;
}
此方法仅仅设置所选实体的X和Y坐标为当前鼠标事件的X和Y坐标。在move()中调用此方法。此方法在tree.js文件中使用。
图四 setPosition() 方法位置
move()
定义：
function move(obj) {
if(window.event.x this.beginX + 5 ||
window.event.y this.beginY + 5 &&
this.enabled == false) {
obj.style.position = "absolute";
obj.style.filter = "alpha(opacity=''''60'''')";
this.setPosition();
this.enabled = true;
obj = obj.removeNode(true);
document.body.appendChild(obj);
document.onmouseup = function anonymous() { dragControl.endDrag() };
}
else if(this.enabled == true) {
this.setPosition();
}
}
这个方法保证用户在任何方向上拖拽对象至少5个象素时，他便将实体对象移到当前目录树之外，然后放进文档体中。在文档对象的"onmousemove"事件中它不断被调用，以便让实体总是显示在鼠标光标旁边。此方法在tree.js文件中使用。如图五所示：
图五 move() 方法位置
reset()
定义：
function reset() {
document.onmouseup = null;
document.onmousemove = null;
this.entity = null;
this.origin = null;
this.target = null;
}
此方法仅仅清除文档和DragControl对象。只要完成或取消拖拽都调用这个方法。此方法在XSLT式样页文件中使用。如图六所示：
图六reset() 方法位置
下面是本文例子代码运行屏幕。在浏览器中打开它后可以任意已进行拖拽操作。
图七 拖拽操作实例
希望本文能抛砖引玉，共同探讨目前比较时髦的XML/XSLT技术，利用它们来提高Web应用程序界面的质量。下一篇文章的内容将介绍另外一个很流行的UI特性：如何用XML/XSLT创建进度条。（待续）
