LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


Drag and throw me
Drag and throw me too
  • Options
CSS
body {
  background-color:black;
  font-family: Signika Negative, Asap, sans-serif;
}

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

.box {
	background-color: #91e600;
	text-align: center;
	font-family: Asap, Avenir, Arial, sans-serif;
	width: 196px;
	height: 100px;
	line-height: 100px;
	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: 20px 0;
}
.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;
}
JS
/*
See https://www.greensock.com/draggable/ for details. 
This demo uses ThrowPropsPlugin which is a membership benefit of Club GreenSock, https://www.greensock.com/club/
*/

var $snap = $("#snap"),
  $liveSnap = $("#liveSnap"),
	$container = $("#container"),
	gridWidth = 196,
	gridHeight = 100,
	gridRows = 6,
	gridColumns = 5,
	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);
	$("
").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, autoScroll: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; } } }); } //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();

Description

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/
Term
Mon, 11/27/2017 - 21:25

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv