vue angular 实现拖拽自适应页面布局指令

Posted 2021-09-14 亲爱的阿乾

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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;
}

组件中使用

以上是关于vue angular 实现拖拽自适应页面布局指令的主要内容，如果未能解决你的问题，请参考以下文章

VUE 创建页面浮窗，拖拽事件与点击事件共存