<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/lieuwex/pen/AwqsI?limit=all&page=48&q=draggable" />
<link rel='stylesheet prefetch' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<style class="cp-pen-styles">/* https://codepen.io/safakotur/pen/ibHga <3333333 */
* {
-webkit-font-smoothing: antialiased;
font-family: sans-serif;
overflow: hidden
}
.chatHead {
background: #fff url('https://www.gravatar.com/avatar/763664ead00ca1ed8e12db1d5ad703c5?s=75&d=identicon&r=PG') no-repeat -3px -5px;
position: fixed;
width: 70px;
height: 70px;
left: 0;
top: 0;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border: solid 1px #fff;
z-index: 10000;
pointer-events: initial;
text-decoration: none;
overflow: initial;
box-shadow: 0 2px 12px 1px rgba(0,0,0,.89);
}
.chatHeadLeader { z-index: 100000; }
.chatHead i {
width: 17px;
height: 24px;
-webkit-border-radius: 4px/3px;
-moz-border-radius: 4px/3px;
border-radius: 4px/3px;
background-color: #adafb5;
background-image: -webkit-linear-gradient(bottom, #ff1919, #ff5959);
background-image: -moz-linear-gradient(bottom, #ff1919, #ff5959);
background-image: -o-linear-gradient(bottom, #ff1919, #ff5959);
background-image: -ms-linear-gradient(bottom, #ff1919, #ff5959);
background-image: linear-gradient(to top, #ff1919, #ff5959);
display: block;
color: #fff;
font-style: normal;
font-family: 'Helvetica';
font-weight: bold;
font-size: 16px;
text-align: center;
line-height: 28px;
box-shadow: 0px 1px 3px #000;
-moz-box-shadow: 0px 1px 3px #000;
-webkit-box-shadow: 0px 1px 3px #000;
border: 1px solid rgba(255, 0, 0, .5);
margin: -5px 0 0 -5px;
text-shadow: 0 2px 0 #c51414;
cursor: default;
-webkit-transition: transform .2s ease-in-out;
-moz-transition: transform .2s ease-in-out;
-ms-transition: transform .2s ease-in-out;
-o-transition: transform .2s ease-in-out;
transition: transform .2s ease-in-out;
}
i.under {
-webkit-transform: translateY(55px);
-moz-transform: translateY(55px);
-ms-transform: translateY(55px);
-o-transform: translateY(55px);
transform: translateY(55px);
}
i.right {
-webkit-transform: translateX(55px);
-moz-transform: translateX(55px);
-ms-transform: translateX(55px);
-o-transform: translateX(55px);
transform: translateX(55px);
}</style></head><body>
<div class="chatHead chatHeadLeader">
<i class="chatHeadBadge">5</i>
</div>
<div class="chatHead chatHeadFollower" style="background: #fff url('http://sphotos-a.ak.fbcdn.net/hphotos-ak-ash4/404911_10200598009661667_1705503855_n.jpg') no-repeat -3px -5px; background-size: 80px 80px;"></div>
<div class="chatHead chatHeadFollower" style="background: #fff url('https://www.gravatar.com/avatar/733664ead00ca1ed8e12db1d5fe703c5?s=75&d=identicon&r=PG') no-repeat -3px -5px; background-size: 80px 80px;"></div>
<div class="chatHead chatHeadFollower" style="background: #fff url('https://www.gravatar.com/avatar/763664ead00ca1ed8e12db1d5eh703c5?s=75&d=identicon&r=PG') no-repeat -3px -5px; background-size: 80px 80px;"></div>
<h1>Sadly im not good with physics :c</h1>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script><script src='https://rawgit.com/facebook/rebound-js/master/rebound.min.js'></script><script src='https://rawgit.com/lodash/lodash/2.4.1/dist/lodash.min.js'></script>
<script >
/*
copyright 2014 Lieuwe Rooijakkers (https://www.github.com/lieuwex)
*/
(function() {
var delayIds, el, fn, i, j, ref, snap;
el = $(".chatHead");
this.springs = {};
this.system = new rebound.SpringSystem();
snap = function(value, side) {
switch (side) {
case "top":
return el.css({
transform: "translate3d(0px, " + value + "px, 0px)"
});
case "left":
return el.css({
transform: "translate3d(" + value + "px, 0px, 0px)"
});
case "right":
return el.css({
transform: "translate3d(" + ($(window).width() + value) + "px, 0px, 0px)"
});
case "bottom":
return el.css({
transform: "translate3d(0px, " + ($(window).height() + value) + "px, 0px)"
});
}
};
springs.top = system.createSpring(40, 6);
springs.left = system.createSpring(40, 6);
springs.right = system.createSpring(40, 6);
springs.bottom = system.createSpring(40, 6);
springs.top.addListener({
onSpringUpdate: function(spring) {
var val;
val = spring.getCurrentValue();
val = rebound.MathUtil.mapValueInRange(val, 0, 1, 1, -20);
return snap(val, "top");
}
});
springs.left.addListener({
onSpringUpdate: function(spring) {
var val;
val = spring.getCurrentValue();
val = rebound.MathUtil.mapValueInRange(val, 0, 1, 1, -20);
return snap(val, "left");
}
});
springs.right.addListener({
onSpringUpdate: function(spring) {
var val;
val = spring.getCurrentValue();
val = rebound.MathUtil.mapValueInRange(val, 0, 1, 1, -40);
return snap(val, "right");
}
});
springs.bottom.addListener({
onSpringUpdate: function(spring) {
var val;
val = spring.getCurrentValue();
val = rebound.MathUtil.mapValueInRange(val, 0, 1, 1, -40);
return snap(val, "bottom");
}
});
$(".chatHead").css({
top: 25
});
springs.right.setCurrentValue(-50).setAtRest();
springs.right.setEndValue(1);
fn = function(i) {
var follower;
follower = $(".chatHeadFollower")[i];
follower.style.top = (25 + (5 * (i + 1))) + "px";
return follower.style.zIndex = 99999 - i;
};
for (i = j = 0, ref = $(".chatHeadFollower").length; 0 <= ref ? j < ref : j > ref; i = 0 <= ref ? ++j : --j) {if (window.CP.shouldStopExecution(1)){break;}
fn(i);
}
window.CP.exitedLoop(1);
delayIds = [];
$(".chatHeadLeader").draggable({
scroll: false,
start: function() {
springs.top.setAtRest();
springs.left.setAtRest();
springs.right.setAtRest();
springs.bottom.setAtRest();
return $(".chatHeadFollower").css({
opacity: 0
});
},
drag: function() {
var k, left, ref1, results, top;
top = Number($(".chatHeadLeader").css("top").replace(/[^\d\.\-]/ig, ""));
left = Number($(".chatHeadLeader").css("left").replace(/[^\d\.\-]/ig, ""));
springs.top.setCurrentValue(top / -20).setAtRest();
springs.left.setCurrentValue(left / -20).setAtRest();
springs.right.setCurrentValue(($(window).width() - left) / 40).setAtRest();
springs.bottom.setCurrentValue(($(window).height() - top) / 40).setAtRest();
$(".chatHeadBadge").removeClass("under");
$(".chatHeadBadge").removeClass("right");
$(".chatHead").css({
transform: "translate3d(0px, 0px, 0px)"
});
results = [];
for (i = k = 0, ref1 = $(".chatHeadFollower").length; 0 <= ref1 ? k < ref1 : k > ref1; i = 0 <= ref1 ? ++k : --k) {if (window.CP.shouldStopExecution(2)){break;}
results.push((function(i, top, left) {
var func;
func = function() {
var follower;
follower = $(".chatHeadFollower")[i];
follower.style.opacity = 1;
follower.style.left = left + "px";
follower.style.top = top + "px";
return follower.style.zIndex = 99999 - i;
};
return delayIds.push(_.delay(func, 20 * (i + 1)));
})(i, top, left));
}
window.CP.exitedLoop(2);
return results;
},
stop: function() {
var closest, delayId, fn1, k, l, left, len, ref1, top, value, values;
for (k = 0, len = delayIds.length; k < len; k++) {if (window.CP.shouldStopExecution(3)){break;}
delayId = delayIds[k];
clearTimeout(delayId);
}
window.CP.exitedLoop(3);
delayIds = [];
top = Number($(".chatHeadLeader").css("top").replace(/[^\d\.\-]/ig, ""));
left = Number($(".chatHeadLeader").css("left").replace(/[^\d\.\-]/ig, ""));
fn1 = function(i, top, left) {
var follower;
follower = $(".chatHeadFollower")[i];
follower.style.left = (left + (5 * (i + 1))) + "px";
follower.style.top = (top + (5 * (i + 1))) + "px";
return follower.style.zIndex = 99999 - i;
};
for (i = l = 0, ref1 = $(".chatHeadFollower").length; 0 <= ref1 ? l < ref1 : l > ref1; i = 0 <= ref1 ? ++l : --l) {if (window.CP.shouldStopExecution(4)){break;}
fn1(i, top, left);
}
window.CP.exitedLoop(4);
values = [
{
side: "top",
value: top
}, {
side: "left",
value: left
}, {
side: "right",
value: $(window).width() - left
}, {
side: "bottom",
value: $(window).height() - top
}
];
closest = _.first(_.sortBy(values, function(v) {
return v.value;
})).side;
value = _.first(_.sortBy(values, function(v) {
return v.value;
})).value;
if (closest === "top") {
springs[closest].setCurrentValue(value / -20).setAtRest();
$(".chatHead").css({
top: 0
});
$(".chatHeadBadge").addClass("under");
} else if (closest === "left") {
springs[closest].setCurrentValue(value / -20).setAtRest();
$(".chatHead").css({
left: 0
});
$(".chatHeadBadge").addClass("right");
} else if (closest === "right") {
springs[closest].setCurrentValue(value / 40).setAtRest();
$(".chatHead").css({
left: 0
});
} else if (closest === "bottom") {
springs[closest].setCurrentValue(value / 40).setAtRest();
$(".chatHead").css({
top: 0
});
}
return springs[closest].setEndValue(1);
}
});
}).call(this);
//# sourceURL=pen.js
</script>
</body></html>
