<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/osublake/pen/NrRJwm?depth=everything&order=popularity&page=73&q=translate&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">html, body {
height: 100%;
}
body {
cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/cursor.png) 32 32, move;
background: #eeeeee;
overflow: hidden;
}
*, *:before, *:after {
box-sizing: border-box;
}
.container {
position: relative;
top: 50%;
left: 50%;
width: 750px;
height: 450px;
opacity: 0;
visibility: hidden;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/cursor.png), move;
cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/cursor.png) 32 32, move;
}
.list-item {
position: absolute;
top: 0;
left: 0;
height: 140px;
width: 240px;
}
.item-content {
height: 100%;
border: 0px solid rgba(123, 123, 123, 0.49804);
border-radius: 4px;
color: #999999;
line-height: 140px;
padding-left: 32px;
font-size: 24px;
font-weight: 400;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px 0px;
}
</style></head><body>
<section class="container">
<div class="list-item" id="alpha">
<div class="item-content">
<span class="order">1</span> Alpha
</div>
</div>
<div class="list-item" id="bravo">
<div class="item-content">
<span class="order">2</span> Bravo
</div>
</div>
<div class="list-item" id="charlie">
<div class="item-content">
<span class="order">3</span> Charlie
</div>
</div>
<div class="list-item" id="delta">
<div class="item-content">
<span class="order">4</span> Delta
</div>
</div>
<div class="list-item" id="echo">
<div class="item-content">
<span class="order">5</span> Echo
</div>
</div>
<div class="list-item" id="foxtrot">
<div class="item-content">
<span class="order">6</span> Foxtrot
</div>
</div>
<div class="list-item" id="gulf">
<div class="item-content">
<span class="order">7</span> Gulf
</div>
</div>
<div class="list-item" id="hotel">
<div class="item-content">
<span class="order">8</span> Hotel
</div>
</div>
<div class="list-item" id="india">
<div class="item-content">
<span class="order">9</span> India
</div>
</div>
</section>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/utils/Draggable.min.js'></script>
<script >"use strict";
// List version
// https://codepen.io/osublake/pen/jrqjdy/
var rowSize = 150;
var colSize = 250;
var totalRows = 3;
var totalCols = 3;
var cells = [];
// Map cell locations to array
for (var row = 0; row < totalRows; row++) {if (window.CP.shouldStopExecution(2)){break;}
for (var col = 0; col < totalCols; col++) {if (window.CP.shouldStopExecution(1)){break;}
cells.push({
row: row,
col: col,
x: col * colSize,
y: row * rowSize
});
}
window.CP.exitedLoop(1);
}
window.CP.exitedLoop(2);
var container = document.querySelector(".container");
var listItems = Array.from(document.querySelectorAll(".list-item")); // Array of elements
var sortables = listItems.map(Sortable); // Array of sortables
var total = sortables.length;
TweenLite.to(container, 0.5, { autoAlpha: 1 });
function changeIndex(item, to, sameRow, sameCol) {
// Check if adjacent to new position
if (sameRow && !sameCol || !sameRow && sameCol) {
// Swap positions in array
var temp = sortables[to];
sortables[to] = item;
sortables[item.index] = temp;
} else {
// Change position in array
arrayMove(sortables, item.index, to);
}
// Simple, but not optimized way to change element's position in DOM. Not always necessary.
sortables.forEach(function (sortable) {
return container.appendChild(sortable.element);
});
// Set index for each sortable
sortables.forEach(function (sortable, index) {
return sortable.setIndex(index);
});
}
function Sortable(element, index) {
var content = element.querySelector(".item-content");
var order = element.querySelector(".order");
var animation = TweenLite.to(content, 0.3, {
boxShadow: "rgba(0,0,0,0.2) 0px 16px 32px 0px",
force3D: true,
scale: 1.1,
paused: true
});
var dragger = new Draggable(element, {
onDragStart: downAction,
onRelease: upAction,
onDrag: dragAction,
cursor: "inherit"
});
var position = element._gsTransform;
// Public properties and methods
var sortable = {
cell: cells[index],
dragger: dragger,
element: element,
index: index,
setIndex: setIndex
};
TweenLite.set(element, {
x: sortable.cell.x,
y: sortable.cell.y
});
function setIndex(index) {
var cell = cells[index];
var dirty = position.x !== cell.x || position.y !== cell.y;
sortable.cell = cell;
sortable.index = index;
order.textContent = index + 1;
// Don't layout if you're dragging
if (!dragger.isDragging && dirty) layout();
}
function downAction() {
animation.play();
this.update();
}
function dragAction() {
var col = clamp(Math.round(this.x / colSize), 0, totalCols - 1);
var row = clamp(Math.round(this.y / rowSize), 0, totalRows - 1);
var cell = sortable.cell;
var sameCol = col === cell.col;
var sameRow = row === cell.row;
// Check if position has changed
if (!sameRow || !sameCol) {
// Calculate the new index
var index = totalCols * row + col;
// Update the model
changeIndex(sortable, index, sameRow, sameCol);
}
}
function upAction() {
animation.reverse();
layout();
}
function layout() {
TweenLite.to(element, 0.3, {
x: sortable.cell.x,
y: sortable.cell.y
});
}
return sortable;
}
// Changes an elements's position in array
function arrayMove(array, from, to) {
array.splice(to, 0, array.splice(from, 1)[0]);
}
// Clamps a value to a min/max
function clamp(value, a, b) {
return value < a ? a : value > b ? b : value;
}
//# sourceURL=pen.js
</script>
</body></html>
