Forked from Captain Anonymous's Pen bdOazJ.
A Pen by risingsunomi on CodePen.
Forked from Captain Anonymous's Pen bdOazJ.
A Pen by risingsunomi on CodePen.
<div class="container-fluid item-container" style="position: relative"> | |
<div class="row item-row"> | |
<div class="mitem col-md-12" style="position: relative;"> | |
Click Here | |
</div> | |
<div class="mitem col-md-12" style="position: relative;"> | |
Click Here 2 | |
</div> | |
<div class="mitem col-md-12" style="position: relative;"> | |
Click Here 3 | |
</div> | |
<div class="mitem col-md-12" style="position: relative;"> | |
Click Here 4 | |
</div> | |
<div class="mitem col-md-12" style="position: relative;"> | |
Click Here 5 | |
</div> | |
</div> | |
</div> | |
<div class="shopping-cart"></div> |
$(function () { | |
$(".mitem").click(function () { | |
var current = $(this); | |
var ccopy = $(this).clone(); | |
var current_x = current.offset().left; | |
var current_y = current.offset().top; | |
var cart_x = $(".shopping-cart").offset().left; | |
var cart_y = $(".shopping-cart").offset().top; | |
ccopy.css({ | |
width: "100px", | |
height: "100px", | |
left: current_x, | |
top: current_y, | |
position: "absolute", | |
"z-index": "9999999", | |
background: "#B22400", | |
}); | |
ccopy.prependTo("body"); | |
ccopy.animate({ | |
left: cart_x, | |
top: cart_y | |
}, 1200, function() { | |
ccopy.appendTo(".shopping-cart").css({ | |
left: "auto", | |
top: "auto", | |
width: "100%", | |
height: "20px", | |
position: "relative", | |
"z-index": "0", | |
"margin-top": "0", | |
"margin-bottom": "0" | |
}); | |
}) | |
}); | |
}); |
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> |
html, body | |
{ | |
background-color: #a0a; | |
} | |
.mitem | |
{ | |
width:100%; | |
border: 2px ridge gray; | |
background:rgb(120,120,240); | |
margin-bottom: 5px; | |
margin-top: 5px; | |
} | |
.shopping-cart | |
{ | |
position: fixed; | |
bottom: 0; | |
right: 0; | |
width: 300px; | |
height: 200px; | |
background: #000; | |
} |
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> |