jquery实现拖拽调整Div大小

2020-05-24 21:26:54易采站长站整理

今天写了一天这个jquery插件:

可以实现对div进行拖拽来调整大小的功能。


(function ($) {
    $.fn.dragDivResize = function () {
        var deltaX, deltaY, _startX, _startY;
        var resizeW, resizeH;
        var size = 20;
        var minSize = 10;
        var scroll = getScrollOffsets();
        var _this = this;
        for (var i = 0; i < _this.length; i++) {
            var target = this[i];
            $(target).on(“mouseover mousemove”, overHandler);
        }
        function outHandler() {
            for (var i = 0; i < _this.length; i++) {
                target.style.outline = “none”;
            }
            document.body.style.cursor = “default”;
        }
        function overHandler(event) {
            target = event.target || event.srcElement;
            var startX = event.clientX + scroll.x;
            var startY = event.clientY + scroll.y;
            var w = $(target).width();
            var h = $(target).height();
            _startX = parseInt(startX);
            _startY = parseInt(startY);
            if ((0 < target.offsetLeft + w – _startX && target.offsetLeft + w – _startX < size) || (0 < target.offsetTop + h – _startY && target.offsetTop + h – _startY < size)) {
                target.style.outline = “2px dashed #333”;
                if ((0 > target.offsetLeft + w – _startX || target.offsetLeft + w – _startX > size) && 0 < target.offsetTop + h – _startY && target.offsetTop + h – _startY < size) {