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

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

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

如何使用原型创建分隔符,例如上图中的Google Docs？

解决方法:

该分隔符实际上是包含在表行中的表单元格.它保持背景颜色和背景图像,以提供与桌面应用程序类似的效果.

我不确定要扩展到什么范围,但是假设表单元格已在标记中指定并且具有适当的样式,则需要设置以下几项：

>鼠标按下处理程序,用于在用户单击单元格时进行注册.
>鼠标移动处理程序,用于在浏览器窗口的上下文中更新分隔符的位置.
>一个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
    });
  }
});

标签：javascript,prototypejs
来源： https://codeday.me/bug/20191210/2102618.html