父元素

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