public
Created

A CodePen by teheran. jQuery Draggable with out jQuery UI - It doesn't have all the fancy callbacks and options, but hey, it makes things draggable. From: http://reader-download.googlecode.com/svn/trunk/jquery-draggable/index.html

  • Download Gist
index.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
<div>
<svg id="svgRoot"
xmlns="http://www.w3.org/2000/svg" version="1.1"
width="100%" height="100%"
viewBox="0 0 300 300">
<symbol id='symbol'>
<image width="100" height="100"
xlink:href="http://upload.wikimedia.org/wikipedia/commons/c/cb/Footnote.svg"/>
</symbol>
<g id="svgElement">
<use transform='translate(000,000)' xlink:href="#symbol"/>
<use transform='translate(100,000)' xlink:href="#symbol"/>
<use transform='translate(200,000)' xlink:href="#symbol"/>
<use transform='translate(000,100)' xlink:href="#symbol"/>
<use transform='translate(100,100)' xlink:href="#symbol"/>
<use transform='translate(200,100)' xlink:href="#symbol"/>
<use transform='translate(000,200)' xlink:href="#symbol"/>
<use transform='translate(100,200)' xlink:href="#symbol"/>
<use transform='translate(200,200)' xlink:href="#symbol"/>
</g>
</svg>
</div>
script.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
var svgRoot = document.getElementById('svgRoot');
 
function zoomSvgElement(element, center, scale) {
var matrix = element.getTransformToElement(svgRoot)
.translate(center.x, center.y)
.scale(scale)
.translate(-center.x, -center.y);
element.setAttribute("transform", "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")");
}
 
function createSVGMatrix() {
return svgRoot.createSVGMatrix()
}
 
function createSVGPoint(clientX, clientY) {
var result = svgRoot.createSVGPoint();
result.x = clientX;
result.y = clientY;
return result;
}
 
function convertClientXY(element, clientX, clientY) {
return createSVGPoint(clientX, clientY)
.matrixTransform(element.getScreenCTM().inverse());
}
 
var commonRatio = 1.1; // знаменатель zoom-прогрессии
function translateMouseWheelClicksToScale(clicks) {
return Math.pow(commonRatio, clicks);
}
 
var accumulator = 0; // накопитель щелчков колесика мышки
$('#svgElement').mousewheel(function(event, delta, deltaX, deltaY) {
zoomSvgElement(
this,
convertClientXY(this, event.pageX, event.pageY),
translateMouseWheelClicksToScale(/*accumulator += */Math.round(delta)));
if (event.preventDefault) {
event.preventDefault();
} else {
return false;
}
});
 
$('div').mousemove(function(e) {
$('#statusDiv').html( e.pageX +', '+ e.pageY );
 
});
style.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
svg {
cursor:"" all-scroll;
}
svg {
display: block;
margin: auto;
background: gray;
cursor: all-scroll;
}
 
div {
border:1px solid red;
margin: 3%;
padding: 3%
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.