用XML和XSLT进行高级的Web UI设计（四）

一起学习

用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.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创建进度条。（待续）
下载本文示例代码


用XML和XSLT进行高级的Web UI设计（四）用XML和XSLT进行高级的Web UI设计（四）用XML和XSLT进行高级的Web UI设计（四）用XML和XSLT进行高级的Web UI设计（四）用XML和XSLT进行高级的Web UI设计（四）用XML和XSLT进行高级的Web UI设计（四）用XML和XSLT进行高级的Web UI设计（四）用XML和XSLT进行高级的Web UI设计（四）用XML和XSLT进行高级的Web UI设计（四）用XML和XSLT进行高级的Web UI设计（四）用XML和XSLT进行高级的Web UI设计（四）用XML和XSLT进行高级的Web UI设计（四）