Question

我有两个列，我希望可以调整大小（一个更宽，另一个变得更窄），但我不确定如何去做。我设置了这个小提琴：http://jsfiddle.net/4kyoyazq/

目前我有三列，其中一个名为“句柄”，位于（z-index）其他列之上。

//left col
#content {
  position:absolute;
  left:0;
  right:250px;
  bottom:30px;
  top:50px;
  background:red;
  z-index:0;
  overflow-y:scroll;
}

//right col
#menu {
  position:absolute;
  right:0;
  top:50px;
  width:250px;
  bottom:30px;
  background:#yellow;
}

#handle {
  position:absolute;
  right:250px;
  top:50px;
  width:10px;
  bottom:30px;
  background:blue;
  cursor: col-resize;
  z-index:5;
}

我的指令在小提琴上是空的 - 如何在指令中定位两个列div，这样如果我拖动句柄div我可以改变两列的宽度？

var myApp = angular.module('myApp', []);

myApp.directive("draggable", function(){
    return {
          restrict: 'A',
          link: function (scope, element, attrs) {
              element.on('click', function () {
                  //do something here
              });
          }
      };
});

Answer 1

这可能不是您正在寻找的。但在我的应用程序中，它的效果非常好。

该指令是此jquery插件的包装器：colResizeable

它使用table布局而不是div。

angular的指令是：

myApp.directive('colResizeable', function() {
  return {
    restrict: 'A',
    link: function(scope, elem) {
      setTimeout(function() {
        elem.colResizable({
          liveDrag: true,
          gripInnerHtml: "<div class='grip'></div>",
          draggingClass: "dragging",
          onDrag: function() {
            //trigger a resize event, so width dependent stuff will be updated
            $(window).trigger('resize');
          }
        });
      });
    }
  };

html部分是：

<body>
  <table style="width: 100%;height:300px" col-resizeable>
    <tr>
      <td style="background:red">content</td>
      <td style="background:blue;width:100px">menu</td>
    </tr>
  </table>
</body>

还要看一下css。（在此示例中，手柄/手柄图标是随机生成的）

工作的掠夺者是here

Answer 2

您必须在超时功能中为此指令设置值

myApp.directive('colResizeable', function() {
return {
restrict: 'A',
link: function(scope, elem) {
  setTimeout(function() {
    elem.colResizable({
      liveDrag: true,
      gripInnerHtml: "<div class='grip'></div>",
      draggingClass: "dragging",
      onDrag: function() {
        //trigger a resize event, so width dependent stuff will be updated
        $(window).trigger('resize');
      }
    });
  //set timeout value
  }, 1000);
}
};

因为一段时间以来，该指令在没有超时的情况下无法正常工作

Angularjs的可调整大小的列

2 个答案: