Imagine a DIV block, 1000x500 pix in size, another DIV inside it, 2000x1000 in size with a 50% zoom applied. And inside is not a picture, but a page.

The usual zoom buttons are not a problem, which simply change the zoom parameter of the diva, but they want to be able to take the contents of the mouse and drag it in different directions

Can anyone suggest a solution where to dig, or an article with a code?

    1 answer 1

    jquery-ui

    $(function() { $("#draggable").draggable(); }); 
     #warp { width: 1000px; height: 500px; border: 2px solid red; overflow: auto; } #draggable { width: 700px; height: 700px; padding: 0.5em; border: 2px solid green; } #draggable img { width: 2000px; height: 1000px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <div id="warp"> <div id="draggable" class="ui-widget-content"> <img src="https://pixabay.com/static/uploads/photo/2015/03/26/09/47/sky-690293_960_720.jpg"> </div> </div>

    • draggable is it! THX. an example is better than the documentation)) - gforce