关于javascript: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;
}

组件中应用

<div class=”v-split” v-ewresize></div>
<div class=”h-split” v-nsresize></div>

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;
}

组件中应用

<div class=”v-split” ewresize></div>
<div class=”h-split” nsresize></div>