图片旋转，拖拽，缩放，删除一体

引入我写的基样式

<link href="http://120.26.59.104/base.css" rel="stylesheet" type="text/css" />

css部分

<style>

    .imgWap{ width:500px; height:600px; border:1px solid #ddd; position:relative;}

    .imgWap .img{ position:absolute; top:10px; left:10px;}

    .imgWap .img img{ width:100%; height:100%;}

    .imgWap .img .zhuan,.imgWap .img .suo,.imgWap .img .shan{ position:absolute; width:58px; height:58px;}

    .imgWap .img .zhuan{ top:-29px; left:-29px; background:url(http://120.26.59.104/bankcard/images/zhuan.png);cursor:se-resize}

    .imgWap .img .suo{ bottom:-29px; right:-29px;background:url(http://120.26.59.104/bankcard/images/suo.png); cursor:se-resize}

    .imgWap .img .shan{ top:-29px; right:-29px;background:url(http://120.26.59.104/bankcard/images/shan.png); cursor:pointer}



</style>

html部分

<div class="imgWap">

    <div class="img" style="width:200px; height:200px;">

        <div class="zhuan"></div><div class="suo"></div><div class="shan"></div>

        <img src="http://g.hiphotos.baidu.com/image/h%3D300/sign=543efd1b2b738bd4db21b431918a876c/f7246b600c3387446572adba540fd9f9d62aa045.jpg" draggable="false" />

    </div>

</div>

引入用到的在线js插件

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://www.ablanxue.com/uploadfile/201405/14002000656579086/ablanxue/js/jQueryRotate.2.2.js"></script>

js部分（拖拽，旋转，删除，缩放）

//调用方法

drag($(".imgWap"),$(".imgWap .img"));



function drag($outTar,$imgWap){

    var _tarWidth,_tarHeight;

    var _outWidth = $outTar.width();

    var _outHeight = $outTar.height();

    //拖拽

    $(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() {

                    var _top;

                    var _left;

                    _tarWidth = $(this.move_target).width(),_tarHeight = $(this.move_target).height();

                    var _maxWidth = _outWidth - _tarWidth;

                    var _maxHeight = _outHeight - _tarHeight;

                    _top = e.pageY - posix.y;

                    _left = e.pageX - posix.x;

                    

                    if((e.pageY - posix.y)<0){

                        _top = 0

                    }else if((e.pageY - posix.y)>_maxHeight){

                        _top = _maxHeight

                    };

                    if((e.pageX - posix.x)<0){

                        _left = 0

                    }else if((e.pageX - posix.x)>_maxWidth){

                        _left = _maxWidth

                    };

                    $(this.move_target).css({

                        'top': _top,

                        'left': _left

                    });

                };



            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 = $imgWap.mousedown(function(e) {

            $this = $(this);

            var position = $(this).position();

            this.posix = {'x': e.pageX - position.left, 'y': e.pageY - position.top};

            $.extend(document, {'move': true, 'move_target': this});

    })

    //旋转

    $imgWap.on('mousedown', '.zhuan', function(e) {

        var _pageX;//鼠标x距离

        var _pageY;//鼠标y距离

        var _offX;//顶点x距离，固定的

        var _offY;//顶点x距离，固定的

        var _oX;//中心点坐标，固定的

        var _oY;//中心点坐标，固定的

        _offX = $imgWap.offset().left;

        _offY = $imgWap.offset().top;

        $.extend(document, {'move': true, 'call_down': function(e) {

            _pageX = e.pageX;

            _pageY = e.pageY;

            _oX = $imgWap.width()/2+_offX;

            _oY = $imgWap.height()/2+_offY;

            var _jiaodu;

            var _plusJiaodu;

            var a,b,c;

                a = Math.abs(_oY - _pageY);

                b = Math.abs(_oX - _pageX);

            //第一象限

            _plusJiaodu = Math.atan(($imgWap.height()/2)/($imgWap.width()/2))*180/Math.PI;

            _jiaodu = Math.atan(a/b)*180/Math.PI;

            if(_pageX<_oX&&_pageY<_oY){

                console.log("第一象限")

                _jiaodu = _jiaodu -_plusJiaodu

            }

            //第二象限

            if(_pageX>_oX&&_pageY<_oY){

                console.log("第二象限:")

                _jiaodu = 180 - _jiaodu - _plusJiaodu

            }

            //第三象限

            if(_pageX>_oX&&_pageY>_oY){

                console.log("第三象限")

                _jiaodu = 180 + _jiaodu -_plusJiaodu

            }

            //第四象限

            if(_pageX<_oX&&_pageY>_oY){

                console.log("第四象限:"+_jiaodu)

                _jiaodu = 360 - _jiaodu -_plusJiaodu

            }

            console.log(_jiaodu)

            $imgWap.rotate(_jiaodu)

          }

        });

        return false;

    });

    //缩放

    $imgWap.on('mousedown', '.suo', function(e) {

        var posix = {

                'w': $imgWap.width(), 

                'h': $imgWap.height(), 

                'x': e.pageX, 

                'y': e.pageY

            };

        

        $.extend(document, {'move': true, 'call_down': function(e) {

            var width = Math.max(50, e.pageX - posix.x + posix.w)

            if(width>718){width=718}

            $imgWap.css({

                'width': width,

                'height': width

            });

            

        }});

        

        return false;

    });

    //删除

    $imgWap.on('mousedown', '.shan', function(e) {

        $imgWap.remove();

    });

};