jQuery UI Drag Zoom Test

by sberube

HTML

<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<span>
<button id="zoomin">Zoom In</button>
<button id="zoomout">Zoom Out</button>
</span>

<div id="outer">
    <div id="draggable">Drag Me!</div>
</div>

CSS

#outer {
    width: 800px;
    height: 800px;
    border: 1px solid black;
    zoom: 0.5;
}
#draggable {
    width: 100px;
    height: 100px;
    position: absolute;
    border: 1px solid blue;
    background-color: lightblue;
}

JavaScript

// Other http://jsfiddle.net/TqUeS/

var _minZoom = 0.25;
var _maxZoom = 1.75;
var _currentZoom = 1.00;

$('#draggable').draggable();

$("#zoomin").click(function (event) {
    if (_currentZoom < _maxZoom) {
        var newZoom = Math.round((_currentZoom + 0.05) * 100) / 100;
        setZoom(newZoom);
    }
});

$("#zoomout").click(function (event) {
    if (_currentZoom > _minZoom) {
        var newZoom = Math.round((_currentZoom - 0.05) * 100) / 100;
        setZoom(newZoom);
    }
});

var setZoom = function (zoom) {
    _currentZoom = zoom;
    var transformOrigin = [0.5, 0.5];
    var el = $("#outer")[0];
    var p = ["webkit", "moz", "ms", "o"],
        s = "scale(" + zoom + ")",
        oString = (transformOrigin[0] * 100) + "% " + (transformOrigin[1] * 100) + "%";
    for (var i = 0; i < p.length; i++) {
        el.style[p[i] + "Transform"] = s;
        el.style[p[i] + "TransformOrigin"] = oString;
    }
}