EjGoJW

EjGoJW.markdown

EjGoJW

Forked from Captain Anonymous's Pen bdOazJ.

A Pen by risingsunomi on CodePen.

License.

index.html

<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>

script.js

$(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"
        });        
    })
  });

});

scripts

<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>

style.css

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;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />