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"  />