关于jQuery拖拽图片与改变图片大小问题

我这有个图片拖拽代码，求高人帮我在这基础上加上鼠标放在周围改变图片大小效果代码。谢谢了。或者，有这方面多图片拖拽与改变大小的DOME也行。
不要单图片的。
代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<style type="text/css">
        body
        {
            margin: 0;
            padding: 0;
        }
      
        .pointer
        {
            cursor: pointer;
        }
        .on
        {
            box-shadow: 0 0 10px #111;
            cursor: move;
        }
        .off
        {
            box-shadow: 0 0 0 0;
            cursor: pointer;
        }

    </style>
</head><body>
 <div style="width: 100%; height: 100%; margin: 0 auto;" id="main">
            <img src="aaa.png" id="2" style="width:200px; height:200px;border: 2px solid #999;position: absolute;" />
     
            <img src="aaa.png" id="1" style="width:200px; height:200px;border: 2px solid #999;position: absolute;"/>
   
            <img src="aaa.png" id="332" style="width:200px; height:200px;border: 2px solid #999;position: absolute;"/>
     
            <img src="aaa.png" id="1231" style="width:200px; height:200px;border: 2px solid #999;position: absolute;"/>
    </div>
    <script type="text/javascript">
    $(function () {
        $("#main img").mouseover(function (e) {
var oe=e||window.event;
            var divid = $(this).attr("id"); //获取当前div的id
            var odiv = document.getElementById(divid); //得到当前div
            $(this).css("z-index", "100").siblings().css("z-index", "0"); //div层叠顺序
            moveDiv(odiv);
        });        function moveDiv(obj) {
            obj.onmousedown = function (e) {//鼠标按下事件
                var oe = e || window.event;
                var $this = this;
                var startX = oe.clientX - $this.offsetLeft;
                var startY = oe.clientY - $this.offsetTop;
                obj.className = "on"; //css3阴影样式添加
document.onmousemove = function (e) {//鼠标移动事件
                    var oe = e || window.event;

                    $this.style.left = oe.clientX - startX + "px";
                    $this.style.top = oe.clientY - startY + "px";
$this.className='pointer';

         }
                document.onmouseup = function () {//鼠标松开事件
                    document.onmousemove = null;
                    document.onmouseup = null;
                    obj.className = "off"; //css3阴影样式去除                    if ($this.releaseCapture) {//debug释放鼠标捕获
                        $this.releaseCapture();
                    }
                }
                if ($this.setCapture) {//debug设置鼠标捕获
                    $this.setCapture();                }
                return false;
            }
        }
    });
</script>
</body>
</html>