Draggable-(Mini).markdown

Draggable (Mini)

Drag and throw elements and watch them continue naturally with momentum, respect bounds and optionally snap to a grid. This is the demo seen at http://www.greensock.com/draggable/

A Pen by GreenSock on CodePen.

License.

index.html

<link href='http://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Signika+Negative:300,400,700' rel='stylesheet' type='text/css'>
<div class="demo">
  <div id="knob-head">Spin the Knob</div>
  <div id="knob"></div>
<div id="container">
		<div class="box" id="box1">Drag and throw me</div>
		<div class="box" id="box2" style="left:375px; background-color:red;">Drag and throw me</div>
</div>
<div class="controls">
				<ul>
					<li class="controlsTitle">Options</li>
					<li>
						<label><input type="checkbox" name="snap" id="snap" value="1" /> Snap end position to grid</label>
					</li>
					<li>
						<label><input type="checkbox" name="liveSnap" id="liveSnap" value="1" /> Live snap</label>
					</li>
				</ul>
			</div>
  </div>

script.js

/*
See http://www.greensock.com/draggable/ for details. 
*/
var $snap = $("#snap"),
  $liveSnap = $("#liveSnap"),
	$container = $("#container"),
	gridWidth = 125,
	gridHeight = 70,
	gridRows = 4,
	gridColumns = 6,
	i, x, y;

//loop through and create the grid (a div for each cell). Feel free to tweak the variables above
for (i = 0; i < gridRows * gridColumns; i++) {
	y = Math.floor(i / gridColumns) * gridHeight;
	x = (i * gridWidth) % (gridColumns * gridWidth);
	$("<div/>").css({position:"absolute", border:"1px solid #454545", width:gridWidth-1, height:gridHeight-1, top:y, left:x}).prependTo($container);
}

//set the container's size to match the grid, and ensure that the box widths/heights reflect the variables above
TweenLite.set($container, {height: gridRows * gridHeight + 1, width: gridColumns * gridWidth + 1});
TweenLite.set(".box", {width:gridWidth, height:gridHeight, lineHeight:gridHeight + "px"});

//the update() function is what creates the Draggable according to the options selected (snapping).
function update() {
  var snap = $snap.prop("checked"),
      liveSnap = $liveSnap.prop("checked");
	Draggable.create(".box", {
		bounds:$container,
		edgeResistance:0.65,
		type:"x,y",
		throwProps:true,
		liveSnap:liveSnap,
		snap:{
			x: function(endValue) {
				return (snap || liveSnap) ? Math.round(endValue / gridWidth) * gridWidth : endValue;
			},
			y: function(endValue) {
				return (snap || liveSnap) ? Math.round(endValue / gridHeight) * gridHeight : endValue;
			}
		}
	});
}

//spin the knob
Draggable.create("#knob", {
  type:"rotation",
  throwProps:true
})

//when the user toggles one of the "snap" modes, make the necessary updates...
$snap.on("change", applySnap);
$liveSnap.on("change", applySnap);

function applySnap() {
	if ($snap.prop("checked") || $liveSnap.prop("checked")) {
		$(".box").each(function(index, element) {
			TweenLite.to(element, 0.5, {
				x:Math.round(element._gsTransform.x / gridWidth) * gridWidth,
				y:Math.round(element._gsTransform.y / gridHeight) * gridHeight,
				delay:0.1,
				ease:Power2.easeInOut
			});
		});
	}
	update();
}

update();

//This demo uses ThrowPropsPlugin which is a membership benefit of Club GreenSock, http://www.greensock.com/club/

style.css

body {
  background-color: black;
}

.demo {
  font-family: Signika Negative, Asap, sans-serif;
  position:relative;

}
#container {
  height:801px; 
  overflow:visible; 
  padding:0; 
  position:relative;
}
.demo {position:relative;}

.box {
  background-color: #91e600;
  text-align: center;
  font-family: Asap, Avenir, Arial, sans-serif;

  font-size:12px;
  width: 150px;
  height: 75px;
  line-height: 75px;
  color: black;
  position: absolute;
  top:0;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.controls {
  background-color: #222;
  border: 1px solid #555;
  color: #bbb;
  font-size: 18px;
  margin: -1px 0 0 0;
  width:749px;
}
.controls ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.controls li {
  display: inline-block;
  padding: 8px 0 8px 10px;
  margin:0;
}
.controls input {
  vertical-align:middle;
  cursor: pointer;
}
.controls .controlsTitle {
  border-right:1px solid #555; 
  border-bottom:none; 
  padding-right:10px;
}

#knob {
  position:absolute;
  width:140px;
  height:140px;
  top:75px;
  left:770px;
  border-radius:50%;
  line-height:140px;
  text-align:center;
  color:black;
  background:url(http://www.greensock.com/wp-content/uploads/custom/draggable/img/knob_small.png);
}

#knob-head {
  position:absolute;
  width:140px;
  height:140px;
  color:#bbb;
  top:35px;
  left:770px;
  text-align:center;
  
}