Draggable Cards

Draggable Cards.markdown

Draggable Cards

This example uses hammer.js & vector.js

A Pen by Samuel V Sylvester on CodePen.

License.

index.html

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">

<link href="http://materializecss.com/dist/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection">

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://rawgit.com/sam-g-steel/MaterializeJS/master/libs/materialize/js/materialize.js"></script>
<script src="http://rawgit.com/sam-g-steel/MaterializeJS/master/js/MaterializeJS.js"></script>
<script src="http://julian.com/research/velocity/build/velocity.ui.js"></script>
<div id="Element01" class="card-panel deep-purple darken-4 white-text" style="width: 20em; height: 20em;">
  <b>Static Card</b>
  <hr></hr>
  <i><span id="i1"></span></i>
</div>
<div id="Element01" class="card-panel blue darken-3 white-text" style="width: 20em; height: 20em;">
  <b>Static Card</b>
  <hr></hr>
  <i><span id="i1"></span></i>
</div>
<div id="Element01" class="card-panel green darken-2 white-text" style="width: 20em; height: 20em;">
  <b>Static Card</b>
  <hr></hr>
  <i><span id="i1"></span></i>
</div>
<div id="Element01" class="card-panel yellow darken-1 white-text" style="width: 20em; height: 20em;">
  <b>Static Card</b>
  <hr></hr>
  <i><span id="i1"></span></i>
</div>
<div id="Element01" class="card-panel orange white-text" style="width: 20em; height: 20em;">
  <b>Static Card</b>
  <hr></hr>
  <i><span id="i1"></span></i>
</div>
<div id="myElement" class="card-panel red darken-2 white-text" style="width: 20em; height: 20em;">
  <b>Drag Card</b>
  <hr></hr>
  <i><span id="posSpan"></span></i>
</div>
<div id="Element01" class="card-panel brown darken-3 white-text" style="width: 20em; height: 20em;">
  <b>Swipe Card</b>
  <hr></hr>
  <i><span id="i1"></span></i>
</div>
<div id="Element01" class="card-panel grey darken-4 white-text" style="width: 20em; height: 20em;" onClick="$('#myElement').velocity('callout.tada').velocity('callout.tada');">
  <b>Static Card</b>
  <hr></hr>
  <i><span id="i1"></span></i>
</div>
<script>
    $(".card-panel").velocity({ translateX: 0, translateY: 0 }, 500).velocity("transition.slideRightBigIn", { stagger: 250 });
   
    $("#myElement").velocity("callout.tada").velocity("callout.tada");
</script>

script.js

$( document ).ready(function() {
  // Handler for .ready() called.
  //debugger;
	$(".card-panel").makeCardsDraggable();
});

function swapCards(card1, card2){
  var bottomCardPrevious = $(card2).prev();
  $(card1).before($(card2));
  $(bottomCardPrevious).after($(card1));
}

function swapCardsAnimated(card1, card2){
  var origPos = [];
  var listOfCards = $(card1).parent().children(".card-panel");
  
  // Get the origonal positions of all the cards
  // Todo: Animate only the cards that are moved
  $.each(listOfCards, function(i, o) {
    origPos.push($(o).getBoundingClientRect());
  });
  
  // Swap cards
  $(card1).before($(card2));
  
  // 
  $.each(listOfCards, function(i, o) {
    origPos.push($(o).getBoundingClientRect());
  });
  
}

style.css

html{
  background: silver;
}

.card-panel {
  /*left: calc(50% - 70px);
  position: relative;*/
  text-align: center;
  float: left;
  margin: 0.33em !important; 
}

/* Single-direction drop shadow */

hr {
    height: 12px !important;
    margin: 10px -20px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
}