javascript - 如何使用 Prototype 在两个 DIV 之间创建分隔符

Question

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

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

如何使用原型(prototype)创建分隔符，例如上图中的 Google Docs？

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
    });
  }
});