用XML和XSLT进行高级的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.x > this.beginX + 5 ||
 window.event.y < this.beginY -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创建进度条。（待续）

下载本文示例代码

输入您的搜索字词 提交搜索表单