javascript로 이미지를 다른 이미지 밑으로 드래그하여 이동시키는 방법

두 이미지가 중첩되면 drag중인 이미지의 drop이 방해받는다.
mouse up 이벤트 핸들러를 <html>에 등록시키면 이 문제를 해결할 수 있다.


<!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
    $(function() {
      var debug = $('#debug');
      var o = $('#my_ball');
      var sx, sy, dx, dy, ix, iy;
      var dragging = false;
      $('#my_ball').on('mousedown', function(e) {
        e.preventDefault();
        sx = e.pageX;
        sy = e.pageY;
        ix = $(o).offset().left;
        iy = $(o).offset().top;
        dx=dy=0;
        dragging = true;
        console.log("mousedown - s:",sx,sy,"/i:",ix,iy);
      });
      $('html').on('mousemove', function(e) {
        if(dragging) {
          dx = e.pageX - sx;
          dy = e.pageY - sy;
          $(o).offset({left: ix+dx, top: iy+dy});
          $(debug).text(dx + "," + dy);
        }
      }).on('mouseup', function(e){

        if(dragging) {


          dx = e.pageX - sx;
          dy = e.pageY - sy;
          $(o).offset({left: ix+dx, top: iy+dy});
          dragging = false;
          console.log("mouseup - d:",dx,dy,"/i:",ix,iy);

        }


      });
    });
    </script>
  </head>
  <body>
    <img src="ball.png"  style="position:relative;" id="my_ball">
    <img src="ball2.png" style="position:relative;">
    <p style="text-align:right;" id="debug"> </p>
  </body>
</html>