<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/osublake/pen/gGLLOa?limit=all&page=60&q=draggable" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">* {
box-sizing: border-box;
}
html, body {
height: 100%;
min-height: 100%;
}
body {
overflow: hidden;
}
.container,
.outline,
.image,
.handle {
position: absolute;
top: 50%;
left: 50%;
}
.container {
visibility: hidden;
}
.outline {
border: 1px dashed black;
}
.handle {
width: 15px;
height: 15px;
background: #000;
border-radius: 50%;
}
</style></head><body>
<div class="container">
<img class="image" width="128" height="128" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/bee3.svg" alt="">
<div class="outline"></div>
<div class="handle"></div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/utils/Draggable.min.js'></script>
<script >console.clear();
var container = document.querySelector(".container");
var outline = document.querySelector(".outline");
var handle = document.querySelector(".handle");
var image = document.querySelector(".image");
var origSize = {
width: image.width,
height: image.height
};
var origVector = {
x: origSize.width/ 2,
y: -origSize.height / 2
};
// Length/magnitude of vector
var len1 = Math.sqrt(origVector.x * origVector.x + origVector.y * origVector.y);
// Normalized vector
var v1 = {
x: origVector.x / len1,
y: origVector.y / len1
};
// Angle of vector
var angle1 = Math.atan2(v1.y, v1.x);
TweenLite.set([container, image, handle, outline], {
xPercent: -50,
yPercent: -50
});
TweenLite.set(outline, {
width: origSize.width,
height: origSize.height
});
TweenLite.set(handle, {
x: origVector.x,
y: origVector.y
});
Draggable.create(container);
Draggable.create(handle, {
onPress: stopPropagation,
onDrag: transformItems
});
TweenLite.set(container, {
autoAlpha: 1
});
function transformItems() {
// Move vector
var v2 = {
x: this.x,
y: this.y
};
// Length of move vector
var len2 = Math.sqrt(v2.x * v2.x + v2.y * v2.y);
// Normalize move vector
if (len2) {
v2.x /= len2;
v2.y /= len2;
}
var angle = Math.atan2(v2.y, v2.x) - angle1;
var scale = len2 / len1;
TweenLite.set(outline, {
width: origSize.width * scale,
height: origSize.height * scale,
rotation: angle + "_rad"
});
TweenLite.set(image, {
scale: scale,
rotation: angle + "_rad"
});
}
function stopPropagation(event) {
event.stopPropagation();
}
//# sourceURL=pen.js
</script>
</body></html>
