如何在两个带有Prototype的DIV之间创建分隔符

Question

alt text http://img197.imageshack.us/img197/9084/seperator.png

http://img197.imageshack.us/img197/9084/seperator.png

如何使用原型创建分隔符，例如上图中的Google文档？

Answer 1

该分隔符实际上是表格行中包含的表格单元格。它维护background-color和background-image，使其具有与您在桌面应用程序中看到的效果类似的效果。

我不确定你想要做什么扩展，但假设已经在标记中指定了表格单元并且它具有适当的样式，你需要设置几个东西：

• 用于在用户点击单元格时注册的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
    });
  }
});

Answer 2

如果你已经在使用Prototype，你可以使用Scriptaculous draggable让分隔符工作，然后挂钩它的事件来相应地调整两个DIV的大小。