前端拖动div 效果

Posted 2021-01-07 chen527

/**
 * author levi
 * url http://levi.cg.am
 */
$(function() {
    $(document).mousemove(function(e) {
        if(!!this.move) {
            var posix = !document.move_target ? {
                    ‘x‘: 0,
                    ‘y‘: 0
                } : document.move_target.posix,
                callback = document.call_down || function() {
                    $(this.move_target).css({
                        ‘top‘: e.pageY - posix.y,
                        ‘left‘: e.pageX - posix.x
                    });
                };

            callback.call(this, e, posix);
        }
    }).mouseup(function(e) {
        if(!!this.move) {
            var callback = document.call_up || function() {};
            callback.call(this, e);
            $.extend(this, {
                ‘move‘: false,
                ‘move_target‘: null,
                ‘call_down‘: false,
                ‘call_up‘: false
            });
        }
    });

    var $box = $(‘.all‘).find(‘.box‘)
    $box.mousedown(function(e) {
        var offset = $(this).offset();

        this.posix = {
            ‘x‘: e.pageX - offset.left,
            ‘y‘: e.pageY - offset.top
        };
        $.extend(document, {
            ‘move‘: true,
            ‘move_target‘: this
        });
    })
    var ocoor = $(‘.box‘).find(‘.coor‘);
    ocoor.mousedown(function(e) {
        var posix = {
            ‘w‘: $box.width(),
            ‘h‘: $box.height(),
            ‘x‘: e.pageX,
            ‘y‘: e.pageY
        };

        $.extend(document, {
            ‘move‘: true,
            ‘call_down‘: function(e) {
                $box.css({
                    ‘width‘: Math.max(100, e.pageX - posix.x + posix.w),
                    ‘height‘: Math.max(100, e.pageY - posix.y + posix.h)
                });
            }
        });
        return false;
    });

});

<div class="all">
    <div class="box">
        <div class="coor"></div>
    </div>
</div>

.box {
                width: 200px;
                height: 100px;
                cursor: move;
                position: absolute;
                top: 30px;
                left: 30px;
                background-color: #FFF;
                border: 1px solid #CCCCCC;
            }
            
            .coor {
                width: 10px;
                height: 10px;
                overflow: hidden;
                cursor: se-resize;
                position: absolute;
                right: 0;
                bottom: 0;
                background-color: #09C;
            }
            
            .all {
                position: relative;
            }