js拖动div或图片

   function small_down(e) {
        var obig = document.getElementById("imgArr");
        var osmall = document.getElementById("UserImg");
        
        document.onmousemove = small_move;
        document.onmouseup = small_up;
        osmall.startX = e.clientX - osmall.offsetLeft;
        osmall.startY = e.clientY - osmall.offsetTop;
    }
    function small_move(e) {
        var obig = document.getElementById("imgArr");
        var osmall = document.getElementById("UserImg");
        var e = e || window.event;


        osmall.style.left = e.clientX - osmall.startX + "px";
        osmall.style.top = e.clientY - osmall.startY + "px";
        var contDivW = $(".imgArr").width();
        var contDivH = $(".imgArr").height();
        if (e.clientX - osmall.startX <= 0) { osmall.style.left = 0 + "px"; }
        if (e.clientY - osmall.startY <= 0) { osmall.style.top = 0 + "px"; }
        if (e.clientX - osmall.startX >= contDivW) { osmall.style.left = contDivW - osmall.startX + "px"; }
        if (e.clientY - osmall.startY >= contDivH) { osmall.style.top = contDivH - osmall.startY + "px"; }
    }
    function small_up() {
        document.onmousemove = null;
    }

   

html代码：

<div class="imgArr" style="width:620px;height:420px;background-color:red;position:relative;">
      <img class="ImgA" src="Images/01.jpg" id="UserImg"   width="150"  height="150"  />
        <img src="Images/02.png" id="BackImg"  />
 </div>

但是上面的方法在拖动的过程中体验不是很好，推荐jq改写的，原理是在原来的图片上加入一个div，拖动div的位置进而拖动图片

$(function () {
        drop("#aaaa", "#aaaa"); //设定绑定拖动事件
    });
    //让一个DIV可以被拖动，id传入移动快标识，title为可拖动位置
    var posX = 0, posY = 0;
    function drop(id, title) {
        var fdiv = $(id);
        $(title).bind("mousedown", function (e) {
            posX = e.clientX - parseInt(fdiv.css("left"));
            posY = e.clientY - parseInt(fdiv.css("top"));
            document.onmousemove = function (ev) {
                fdiv.css("left", (ev.clientX - posX) + "px");
                fdiv.css("top", (ev.clientY - posY) + "px");
            };
        });
        document.onmouseup = function (ev) {
            document.onmousemove = null;
        };
        document.ondragstart = function () { window.event.returnValue = false;};
    }

html代码：

<div id="aaaa" style=" position:absolute; top:0; left:0; width:150px; height:150px;"><img class="ImgA" src="Images/01.jpg" id="UserImg"  
 width="150"  height="150"  /></div>
        <img src="Images/02.png" id="BackImg"  />