角度：创建可移动的垂直线答案

【问题标题】：Angular : create movable vertical line角度：创建可移动的垂直线
【发布时间】：2016-04-12 09:45:44
【问题描述】：

我必须用垂直线将页面分成两部分（比如滑块，并且能够在页面上水平滚动）。我必须只在一侧执行一些功能。我不知道该怎么做。你能给我一些想法吗？

已编辑： 应该是这样的

【问题讨论】：

绘制页面不是 Angular 的工作...... :-) 这是你的视图工作......
@MarcoS 是的，我同意了。但是我该怎么做呢？ :-)
查看克劳迪奥·阿尔维斯的回答...

标签： javascript angularjs

【解决方案1】：

你可能正在寻找类似bg-splitter的东西

或Angular JS resizable div directive

【讨论】：

不，我不想拆分
。我只想在同一个
之一上应用函数

【解决方案2】：

试试我刚刚创建的这个 jsFiddle -> https://jsfiddle.net/larsjueljens/tLq2t04a/8/

这基本上是三个div：

<div class="left">
  This is the left content
</div>
<div class="divider">
</div>
<div class="right">
  This is the right content
</div>

初始样式：

.left {
  position: fixed;
  top: 0px;
  left: 0px:
  width: 200px;
  bottom: 0px;
}

.divider {
  position:fixed;
  top: 0px;
  left: 200px;
  width: 20px;
  bottom: 0px;
  background-color: blue;
}

.right {
  position: fixed;
  top: 0px;
  right: 0px;
  left: 220px;
  bottom: 0px;
}

Javascript 代码：

var isMouseDown = false, 
        leftContent = document.querySelector('.left'),
        divider = document.querySelector('.divider'),
    rightContent = document.querySelector('.right');

divider.addEventListener('mousedown', function (event) {
    isMouseDown = true;
});

divider.addEventListener('mouseup', function (event) {
    isMouseDown = false;
});

divider.addEventListener('mousemove', function (event) {
    if (isMouseDown) {
    leftContent.style.width = (event.clientX - 10) + 'px';
    divider.style.left = (event.clientX - 10) + 'px';
    rightContent.style.left = (event.clientX + 10) + 'px';
  }
});

【讨论】：

实际上，您将
拆分为 3 个子元素，即 3 个
，我不想拆分
:-(
不，我认为这更像是将拆分为 3 个子元素（
）。

<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script> <style> #div1{width:600px;background:yellow;height:60px;} #div2{width:60%;background:green;overflow-y:auto;overflow-x:none;height:60px;} #div3{width:40%;background:pink;} </style> </head> <body ng-app="myApp" ng-controller="myCtrl"> <div id="div1"> <div id="div2"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> <div id="div3"></div> </div> <script> //module declaration var app = angular.module('myApp', []); //controller declaration app.controller('myCtrl',function($scope){ //code here }); </script> </body> </html>