使用Jquery缩放图像后,可拖动区域不正确

Question

我正在使用jquery.viewport来创建一个视口函数:我使用jquery ui来创建滑块和一个自己的书写缩放功能来缩放图像.另外,使用此插件创建视口功能.

http://borbit.github.com/jquery.viewport/

问题是,在我缩放图像后,可拖动区域只是内容的一部分.这意味着我无法拖动其某些区域的内容.无论如何都有解决问题的方法吗？谢谢

HTML:

<div id="view">
    <img src="demo/Web081112_P002_text.png" id = "largeText"/>
    <img src="demo/Web081112_P002_image.jpg" id = "largeImg"/>
</div>
<div id='slider' style='display:block;position:fixed;z-index:105;height:25%;right: 2%;top:25%;'></div>

使用Javascript

<script>

    $(document).ready(function(){

        $("#view").css("height",$(window).height());
        $("#view").css("width",$(window).width());

        /*
        $("#box").css("height",$("#largeImg").height());
        $("#box").css("width",$("#largeImg").width());
        */

        //initiate the viewport
        var element = $('#view').viewport();
        var content = element.viewport('content');
        content.draggable({containment: 'parent'});
        content.scraggable({containment: 'parent'});

               $( "#slider" ).slider({
                orientation: "vertical",
                range: "min",
                min: 100,
                max: 200,
                value: 100,
                slide: function( event, ui ) {

                    $("#largeText").css("width",ui.value+"%");
                    $("

#largeImg").css("width",ui.value+"%");


                    $("#largeText").css("height",ui.value+"%");
                    $("#largeImg").css("height",ui.value+"%");


                    $("#largeText").css('top', ($("#view").height()/2-$("#largeText").height()/2) +'px');
                    $("#largeImg").css('top', ($("#view").height()/2-$("#largeImg").height()/2) +'px');

                    $('#largeText').css('left', ($("#view").width()/2 - $('#largeText').width()/2)+'px');
                    $('#largeImg').css('left', ($("#view").width()/2 - $('#largeImg').width()/2)+'px');

                    //element.viewport('update');
                    //Using this statement to update will occur error.

                 }
            });   


    });
    </script>

CSS:

<style>
    #view {
        height:600px;
        width:350px;
    }

    #largeImg {     
            position:absolute;
            display:block;
            width: 1250px;
            height: 1500px;
            z-index: 100;
    }

    #largeText {
            position:absolute;
            display:block;
            width: 1250px;
            height: 1500px;
            z-index: 101;
    }

    body {
        width : auto;
        height: auto;
        overflow:hidden;
    }
</style>

Answer 1

以下应该根据您对问题的描述为您提供解决方案。我稍微简化了问题，但这仍然应该帮助您指明正确的方向。

\n\n

另外，如果$(\'#view\').viewport(\'update\');无法正常工作，请提供您正在使用的浏览器和版本。

\n\n

解决方案示例： http: //jsfiddle.net/wA3eU/3/

\n\n

超文本标记语言

\n\n

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />    \n<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>\n    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>\n    <script type="text/javascript" src="https://github.com/borbit/jquery.viewport/raw/master/jquery.viewport.js"></script>\n    <script type="text/javascript" src="https://github.com/borbit/jquery.scraggable/raw/master/jquery.scraggable.js"></script>\n\n<table id="SliderData">\n    <tr><td>Scale: </td><td> <div id="UIVal">0</div></td><tr>\n    <tr><td>Width: </td><td> <div id="Width">0</div></td><tr>\n    <tr><td>Height: </td><td> <div id="Height">0</div></td><tr>\n</table>\n<div id="view">\n    <img src="http://farm8.static.flickr.com/7108/6947221908_3675a27fe9.jpg" id = "largeImg"/>\n</div>\n<div id=\'slider\'></div>\n

\n\n

CSS

\n\n

#slider {\n    display:block;\n    position:fixed;\n    z-index:105;\n    height:25%;\n    right:2%;\n    top:25%; \n    margin:1em;\n    background:#ccc;\n}\n\n#SliderData {\n    float:left;\n    display:block;\n    position:fixed;\n    z-index:105;\n    padding: .5em;\n    background: #ccc;\n    opacity:0.4;\n    filter:alpha(opacity=40); /* For IE8 and earlier */\n}\n\n#view {\n    height:250px;\n    width:250px;\n}\n\n#largeImg {     \n        position:absolute;\n        display:block;\n        width: 500px;\n        height: 500px;\n        z-index: 100;\n}\n\nbody {\n    width : auto;\n    height: auto;\n    overflow:hidden;\n}\xe2\x80\x8b\n

\n\n

jQuery

\n\n

$("#view").css("height",$(window).height());\n$("#view").css("width",$(window).width());\n\n//initiate the viewport\nvar element = $(\'#view\').viewport();\nvar content = element.viewport(\'content\');\ncontent.draggable({containment: \'parent\'});\ncontent.scraggable({containment: \'parent\'});\n\nvar defaultHeight = $("#largeImg").height();\nvar defaultWidth = $("#largeImg").width();\n\n $( "#slider" ).slider({\n    orientation: "vertical",\n    range: "min",\n    min: 100, // 1x \n    max: 300, // 3x\n    value: 100,\n    slide: function(event, ui) {\n\n        scale = ui.value/100.;\n\n        $("#largeImg").css(\'width\',defaultHeight * scale);\n        $("#largeImg").css(\'height\',defaultWidth * scale);     \n\n        element = $(\'#view\').viewport(\'update\');\n\n        $("#UIVal").text(scale);\n        $("#Width").text($("#largeImg").width());\n        $("#Height").text($("#largeImg").height());\n     }\n});   \n

\n