Javascript jQuery图像拖入父元素

Javascript jQuery图像拖入父元素,javascript,jquery,drag-and-drop,Javascript,Jquery,Drag And Drop,您好,我有一些问题:在我的示例中,您可以将图像拖到div元素中。但若你们拖动元素,比如说,左图像向左,它会工作,但我需要当拖动图像向左时停止拖动,当图像左==角。 对不起我的英语 首先,试着用我的例子来理解我的意思 范例` 现在 我需要什么 下面是一个工作示例 $(".map-wrap").height($(window).height() - 50); $(".map-wrap .plus").on("click", function(){ var zoomLevel = pa

您好,我有一些问题:在我的示例中,您可以将图像拖到div元素中。但若你们拖动元素,比如说,左图像向左,它会工作,但我需要当拖动图像向左时停止拖动,当图像左==角。 对不起我的英语

首先,试着用我的例子来理解我的意思

范例`

现在

我需要什么
下面是一个工作示例

$(".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');
    });

我不能在你的jFiddle中拖动任何东西,因为首先按下左边的第一个橙色按钮,在拖动开始工作后向左缩放一个。Fiddle在拖动时什么也不做