jQuery перетаскивание изображения в родительском элементе

Question

Привет, у меня есть некоторые проблемы :) в моем примере вы можете перетащить изображение в элемент div. но если вы перетаскиваете элемент, например, левое изображение переходите влево, оно работает, но мне нужно, когда изображение перетаскивания остается перетаскиванием, когда изображение left == corner. Извините за мой английский.

для первых попробуйте мой пример, чтобы понять, что я имею в виду

example`

jsfiddle

Теперь

, что мне нужно

Answer 1

Вот рабочий пример.

$(".map-wrap").height($(window).height() - 50); 
$(".map-wrap .plus").on("click", function(){ 
     var zoomLevel = parseInt($(".map-wrap .map-main").attr("data-zoom")); 
     if (zoomLevel <= 3) { 
      $(".map-wrap .map-main").attr("data-zoom", zoomLevel + 1); 
      var zoom = Math.round($(".map-wrap img").width() * 1.2); 

      $(".map-wrap .drag").css({ 
       width: zoom, 
       left: ($(window).width() - zoom) /2 
      }); 
     } 

     return false; 
    }); 
    $(".map-wrap .minus").on("click", function(){ 
     var zoomLevel = parseInt($(".map-wrap .map-main").attr("data-zoom")); 
     if (zoomLevel > 0) { 
      $(".map-wrap .map-main").attr("data-zoom", zoomLevel - 1); 
      var zoom = Math.round($(".map-wrap img").width()/1.2); 

      $(".map-wrap .drag").css({ 
       width: zoom, 
       left: ($(window).width() - zoom) /2 
      }); 
     } 

     return false; 
    }); 

var $dragging = null; 
    var mY = 0; 
    var mX = 0; 
    $('body').on("mousedown", ".drag", function(e) { 
      $(this).attr('unselectable', 'on').addClass('draggable'); 
      var $dragged = $('.draggable'); 
      var x = $dragged.offset().left - e.pageX, 
      y = $dragged.offset().top - e.pageY, 
      z = $dragged.css('z-index'); 

      var windowWidth = $(window).width(); 
      var windowHeight = $(".map-wrap").height(); 
      var elemWidth = $(".map-main").width(); 
      var elemHeight = $(".map-main").height(); 
      var cordsY = e.pageY; 
      var cordsX = e.pageX; 

      $dragged.css('cursor', 'move'); 

      $('.map-wrap').on("mousemove", function(e) { 
       if ($dragging) { 

        /*if (e.pageY < mY) { 
         if($dragged.offset().left >= windowHeight - elemHeight) { 
         } 

        } else { 
         if($dragged.offset().left <= 0) { 
         } 
        } 
        if (e.pageX < mX) { 
         if($dragged.offset().left <= windowWidth - elemWidth) { 
          return false; 
         } 
        } else { 
         if($dragged.offset().left <= 0) { 
          //return false; 
         } 
        } 

        mY = e.pageY; 
        mX = e.pageX;*/ 

        var left = Math.round(x + e.pageX); 
        var top = Math.round(y + e.pageY); 

        if (left > 0) left = 0; 
        if (left < windowWidth - elemWidth) left = windowWidth - elemWidth; 
        if (top > 0) top = 0; 
        if (top < (windowHeight - elemHeight)) top = (windowHeight - elemHeight); 

        $dragging.offset({ 
         left: left, 
         top: top 
        }); 
       } 
      }); 
      $dragging = $(e.target); 
    }).on("mouseup", ".draggable", function(e) { 
     $dragging = null; 
     $('.draggable').css('cursor', 'default'); 
     $(this).removeAttr('unselectable').removeClass('draggable'); 
    }); 

jsfiddle