"drag & drop"
Bootstrap 3.0.0 Snippet by evarevirus

<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?limit=all&page=31&q=gallery" /> <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>

Related: See More


Questions / Comments: