jqueryDrage/index.html at master · jQueryObject/jqueryDrage · GitHub

1
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>jQuery实现元素拖拽缩放关闭功能</title>    <link rel="stylesheet" href="css/index.css"></head><body><div class="box">    <div class="coor"></div>    <div class="closeBox"></div></div><div class="box">    <div class="coor"></div>    <div class="closeBox"></div></div><div class="box">    <div class="coor"></div>    <div class="closeBox"></div></div></body></html><script src="js/jquery-1.11.0.min.js"></script><script src="js/drage.js"></script><script>$(function(){    $('.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("click",".closeBox",function(){        $(this).parent().hide();    }).on('mousedown', '.coor', function(e) {        var _t = $(this).parent();        var posix = {            'w': _t.width(),            'h': _t.height(),            'x': e.pageX,            'y': e.pageY        };        $.extend(document, {'move': true, 'call_down': function(e) {            _t.css({                'width': Math.max(30, e.pageX - posix.x + posix.w),                'height': Math.max(30, e.pageY - posix.y + posix.h)            });        }});        return false;    });})</script>