vue angularによるドラッグ適応ページレイアウト命令の実現

Vueの定義と使用
mian.jsにカスタムコマンドを登録する
Vue.directive('nsresize', {

inserted(el) {
    let startY = 0;
    let down = false;
    let prevEl;
    let nextEl;
    $(el).bind("mousedown", event => {
        startY = event.pageY;
        down = true;
        prevEl = event.target.previousElementSibling;
        nextEl = event.target.nextElementSibling;
    });
    $(document).bind("mouseup", () => {
        startY = 0;
        down = false;
    });
    $(document).bind("mousemove", event => {
        if ( down ) {
            let y = event.pageY - startY;
            startY = event.pageY;
            $(prevEl).height($(prevEl).height() + y);
            $(nextEl).height($(nextEl).height() - y);
        }
    });
}

});Vue.directive('ewresize', {

inserted(el) {
    let startX = 0;
    let down = false;
    let prevEl;
    let nextEl;
    $(el).bind("mousedown", event => {
        startX = event.pageX;
        down = true;
        prevEl = event.target.previousElementSibling;
        nextEl = event.target.nextElementSibling;
    });
    $(document).bind("mouseup", () => {
        startX = 0;
        down = false;
    });
    $(document).bind("mousemove", event => {
        if ( down ) {
            let x = event.pageX - startX;
            startX = event.pageX;
            let temp = $(prevEl).width() + x;
            let px = temp + "px";
            $(prevEl).width(temp);
            $(nextEl).css("left", px);
            $(nextEl).css("padding-right", px);
            $(el).css("left", px);
        }
    });
}

});
css定義
.h-split { margin-bottom: -1px; cursor: s-resize; padding-top: 10px;}
.v-split { padding-right: 7px; background-color: transparent; cursor: ew-resize; position: absolute; height: 100%; left: 500px; top: 150px; z-index: 10;}
コンポーネントでの使用
Angular定義と使用
common.js定義命令
.directive('nsresize', function () {

        return {
            link: function (scope, el, attrs, ngModel) {
                var startY = 0;
                var down = false;
                var prevEl;
                var nextEl;
                $(el).bind("mousedown", function (event) {
                    startY = event.pageY ;
                    down = true;
                    prevEl = event.target.previousElementSibling;
                    nextEl = event.target.nextElementSibling;
                });
                $(document).bind("mouseup", function (event) {
                    startY = 0;
                    down = false;
                });
                $(document).bind("mousemove", function (event) {
                    if ( down ) {
                        var y = event.pageY-startY;
                        startY = event.pageY;
                        $(prevEl).height($(prevEl).height() + y);
                        $(nextEl).height($(nextEl).height() - y);
                    }
                });
            }
        }
    })
    .directive('ewresize', function () {
        return {
            restrict: 'EA',
            scope: {
                cell: '@'
            },
            link: function (scope, el, attrs, ngModel) {
                var startX = 0;
                var down = false;
                var prevEl;
                var nextEl;
                $(el).bind("mousedown", function (event) {
                    startX = event.pageX ;
                    down = true;
                    prevEl = event.target.previousElementSibling;
                    nextEl = event.target.nextElementSibling;
                });
                $(document).bind("mouseup", function (event) {
                    startX = 0;
                    down = false;
                });
                $(document).bind("mousemove", function (event) {
                    if ( down ) {
                        var x = event.pageX - startX;
                        startX = event.pageX;
                        var temp = $(prevEl).width() + x;
                        var px = temp + "px";
                        $(prevEl).width(temp);
                        $(nextEl).css("left", px);
                        if ( !scope.cell ) {
                            $(nextEl).css("padding-right", px);
                        }
                        $(el).css("left", px);
                    }
                });
            }
        }
    })

css定義
.h-split { margin-bottom: -1px; cursor: s-resize; padding-top: 10px;}
.v-split { padding-right: 7px; background-color: transparent; cursor: ew-resize; position: absolute; height: 100%; left: 500px; top: 150px; z-index: 10;}
コンポーネントでの使用