jquery插件iMove - 素材火

jquery插件iMove，24行代码，让你的网页元素任意放大、缩小、拖拽、移动，在#box，#coor里可以放大、缩小、拖拽、移动，位置，的初始位置大小。

分类：悬浮层/弹出层 > 拖拽难易：

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

首先引用文件

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/iMove-min.js"></script>
<link rel="stylesheet" type="text/css" href="demo/demo.css" />
<script type="text/javascript" src="demo/demo.js"></script>

24行代码，让你的网页元素任意放大、缩小、拖拽、移动。放大、缩小、拖拽、在#box，#coor设置。

jQuery(function(a){a(document)
.mousemove(function(c){if(!!this.move){var b=!document.move_target?{"x":0,"y":0}:document
.move_target.posix,d=document.call_down||function(){a(this.move_target)
.css({"top":c.pageY-b.y,"left":c.pageX-b.x})};d.call(this,c,b)}})
.mouseup(function(b){if(!!this.move){var c=document.call_up||function(){};c.call(this,b);a
.extend(this,{"move":false,"move_target":null,"call_down":false,"call_up":false})}})});

var $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});
    }).on('mousedown', '#coor', 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(30, e.pageX - posix.x + posix.w),
                'height': Math.max(30, e.pageY - posix.y + posix.h)
            });
        }});
        return false;
    });