javascript - 使用AngularJS调整表列的大小(Resize table columns using AngularJS)

Question

I would like to implement resizable table columns, such that when you click and drag on a "notch" on the right side of the th (just a styled div inside the th ), a new "marquee" element is created inside the th and displayed as a guide for resizing.

(我想实现可调整大小的表列，这样，当您单击并拖动th右侧的“凹口”（只是th内的样式div）时，将在th和内部创建一个新的“ marquee”元素显示为调整大小的指南。)

On mouseup, the marquee disappears and the th element's width is set to the new width.

(在mouseup上，选取框消失，第th元素的宽度设置为新的宽度。)

I have created a fiddle to illustrate.

(我创建了一个小提琴来说明。)

It seems like the answer is to create a directive, but my main hangup is how to handle the dynamically-added window mousemove listener plus the "one" window mouseup listener within the directive logic.

(看来答案似乎是创建指令，但是我的主要难题是如何处理指令逻辑中动态添加的窗口mousemove侦听器以及“一个”窗口mouseup侦听器。)

  ask by AndyPerlitch translate from so

Answer 1

I believe that your question is about the "marquee", that is shown for the resize.

(我相信您的问题是关于“选取框”的，该尺寸用于调整大小。)

The solution to this problem is using $scope.$apply , which is responsible for notifying about change of the resize automatically to DOM HTML.

(解决此问题的方法是使用$scope.$apply ，它负责通知自动将调整大小更改为DOM HTML。)

Check out mousemove(e) .

(mousemove(e)出mousemove(e) 。)

Code: http://jsfiddle.net/4d6Bd/31/

(代码： http ： //jsfiddle.net/4d6Bd/31/)