Javascript 如何使用Prototype在两个div之间创建分隔符

---

如何使用prototype创建分隔符，如上图中的Google Docs？

该分隔符实际上是包含在表行中的表单元格。它保持

背景色

和

背景图像

，使其具有类似于桌面应用程序的效果

我不确定您希望进行什么扩展，但假设标记中已经指定了表单元格，并且它具有适当的样式，则需要设置以下几项：

• 用于在用户单击单元格时注册的

  mousedown

  处理程序
• 一个

  mousemove

  处理程序，用于更新浏览器窗口上下文中分隔符的位置
• 一个

  mouseup

  处理程序，用于知道何时停止更新分隔符的位置

关于如何做到这一点，有各种各样的方法，但这里有一个非常非常粗略的例子：

var bMouseIsDown = false;
Event.observe('separator', 'mousedown', function() {
  bMouseIsDown = true;
});
Event.observe('separator', 'mouseup', function() {
  bMouseIsDown = false;
});

Event.observe('separator', 'mousemove', function(evt) {
  if(bMouseIsDown === true) {
    var iX = Event.pointerX(evt);
    var iOffsetX = iX - Position.page($('separator'))[0];
    var iWidth = $('separator').getDimensions().width;
    var iElementOffset = iWidth - iOffsetX;
    $(this).setStyle({
        left: iX - iElementOffset
    });
  }
});

---

如果您已经在使用Prototype，那么可以使用使分隔符工作，然后钩住它的事件以相应地调整两个div的大小