"draggable"
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 lang='en' 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/R0hitYadav/pen/kLhHC?limit=all&page=11&q=draggable" /> <style class="cp-pen-styles">.hide { display: none; } .full-height { min-height: 100%; height: 100%; } .no-sel { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .no-transform:hover { -moz-transform: none; -webkit-transform: none; -ms-transform: none; } .required:after { content: '*'; color: #ff0000; padding-left: 5px; font-size: 16px; } .ir { font: 0/0 a; text-shadow: none; color: transparent; } .no-transition { -moz-transition: none; -webkit-transition: none; -ms-transition: none; } .unstyled-list { padding: 0; margin: 0; list-style: none; } .not-bold { font-weight: 600; } /** * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * contenteditable attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that are clearfixed. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .cf:before, .cf:after { content:" "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } /** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .cf { *zoom: 1; } .dragging { cursor: grabbing !important; cursor: -moz-grabbing !important; cursor: -webkit-grabbing !important; opacity: 0.4; /*-webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95);*/ } .wrapper--tiles { margin-top: 15px; } .tile { background: #f9f9f9; border: 2px solid #ddd; box-sizing: border-box; color: transparent; float: left; font: 0/0 a; margin-right: 10px; margin-top: 10px; text-align: center; text-shadow: none; } .tile[draggable="true"] { cursor: -webkit-grab; cursor: grab; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; -khtml-user-drag: element; -webkit-user-drag: element; } .wrapper--assigned-tiles.full-width { width: 100%; } .wrapper--assigned-tiles.full-width > .tile { width: 24.4%; } .wrapper--assigned-tiles { float: left; width: 80%; /*-webkit-transition: -webkit-transform 0.1s ease-out; -moz-transition: -moz-transform 0.1s ease-out; -o-transition: -o-transform 0.1s ease-out; -ms-transition: -ms-transform 0.1s ease-out;*/ } .wrapper--assigned-tiles > .tile { border-style: dashed; height: 180px; /* -webkit-animation: zoom-in 0.3s cubic-bezier(.1, -0.04, .91, .94) forwards; animation: zoom-in 0.3s cubic-bezier(.1, -0.04, .91, .94) forwards;*/ width: 23.5%; } .wrapper--assigned-tiles > .tile:nth-child(4), .wrapper--assigned-tiles > .tile:nth-child(8) { margin-right: 0; } .wrapper--assigned-tiles .assigned-tile { background: #f5f5f5; border-color: #d6d6d6; border-style: solid; line-height: 180px; } .assigned-tile, .unassigned-tile { color: inherit; font: inherit; text-shadow: inherit; } .edit-mode .assigned-tile { cursor: move; } .over, .assigned-tile.over { border: 2px dashed #aaa; } .wrapper--unassigned-tiles { float: right; width: 20%; height: 380px; overflow: auto; padding-right: 10px; box-sizing: border-box; } .unassigned-tile { background-color: #f9f9f9; text-align: center; width: 100%; height: 30px; line-height: 30px; } @-webkit-keyframes zoom-in { from { opacity: 0; -webkit-transform:scale(0); -moz-transform:scale(0); -ms-transform:scale(0); -o-transform:scale(0); transform:scale(0); } to { -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); opacity: 1; } } @-ms-keyframes zoom-in { from { opacity: 0; -webkit-transform:scale(0); -moz-transform:scale(0); -ms-transform:scale(0); -o-transform:scale(0); transform:scale(0); } to { -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); opacity: 1; } } .wrapper--assigned-tiles.tile:nth child(2), .wrapper--assigned-tiles .tile:nth-child(6) { -webkit-animation-delay: .05s; animation-delay: .05s; } .wrapper--assigned-tiles .tile:nth-child(3), .wrapper--assigned-tiles .tile:nth-child(7) { -webkit-animation-delay: .1s; animation-delay: .1s; } .wrapper--assigned-tiles .tile:nth-child(4), .wrapper--assigned-tiles .tile:nth-child(8) { -webkit-animation-delay: .12s; animation-delay: .12s; }</style></head><body> <!-- HTML 5 draggable droppable swappable--> <section class="wrapper--tiles cf"> <ul class="wrapper--assigned-tiles unstyled-list cf"> <li class="tile assigned-tile" draggable="true" data-index="0">A</li> <li class="tile assigned-tile" draggable="true" data-index="1">B</li> <li class="tile" draggable="true" data-index="2"></li> <li class="tile" draggable="true" data-index="3"></li> <li class="tile" draggable="true" data-index="4"></li> <li class="tile" draggable="true" data-index="5"></li> <li class="tile" draggable="true" data-index="6"></li> <li class="tile" draggable="true" data-index="7"></li> </ul> <ul class="wrapper--unassigned-tiles unstyled-list cf"> <li class="tile unassigned-tile" draggable="true" data-index="0a">0</li> <li class="tile unassigned-tile" draggable="true" data-index="1a">1</li> <li class="tile unassigned-tile" draggable="true" data-index="2a">2</li> <li class="tile unassigned-tile" draggable="true" data-index="3a">3</li> <li class="tile unassigned-tile" draggable="true" data-index="4a">4</li> <li class="tile unassigned-tile" draggable="true" data-index="5a">5</li> <li class="tile unassigned-tile" draggable="true" data-index="6a">6</li> <li class="tile unassigned-tile" draggable="true" data-index="7a">7</li> <li class="tile unassigned-tile" draggable="true" data-index="8a">8</li> </ul> </section> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >var tile; tile = tile || {}; // elements and cached DOM elements tile.elements = { $containerTiles: $('.wrapper--tiles'), $containerSelTiles: $('.wrapper--assigned-tiles'), $containerunassignedTiles: $('.wrapper--unassigned-tiles'), dragSrcElement: null }; tile.classes = { assigned : 'assigned-tile', unassigned : 'unassigned-tile', dragging : 'dragging', draggingOver: 'over' }; tile.helpers = { handleDragStart: function(e) { var $draggedElement = $(this), dataTransfer = e.originalEvent.dataTransfer; // element being dragged is an unassigned tile or an assigned tile, allow transfer if ($draggedElement.hasClass(tile.classes.assigned) || $draggedElement.hasClass(tile.classes.unassigned)) { tile.elements.dragSrcElement = $draggedElement; $draggedElement.addClass(tile.classes.dragging); dataTransfer.setData('text', $draggedElement.attr('data-index')); } else { return false; } }, handleDragEnter: function() { var $dropZoneElement = $(this); $dropZoneElement.addClass(tile.classes.draggingOver); return false; }, handleDragOver: function(e) { var $dropZoneElement, dataTransfer = e.originalEvent.dataTransfer; if (e.preventDefault) { e.preventDefault(); } if (e.currentTarget) { $dropZoneElement = $(e.currentTarget); if ($dropZoneElement.hasClass(tile.classes.unassigned)) { dataTransfer.dropEffect = 'none'; $dropZoneElement.removeClass(tile.classes.draggingOver); } else { dataTransfer.dropEffect = 'move'; } } return false; }, handleDragLeave: function() { $(this).removeClass(tile.classes.draggingOver); }, handleDrop: function(e) { var $droppedOnElement = $(this), index, $temp; if (e.stopPropagation) { e.stopPropagation(); } if (tile.elements.dragSrcElement && tile.elements.dragSrcElement !== $droppedOnElement) { index = e.originalEvent.dataTransfer.getData('text'); $temp = $('.tile[data-index="' + index + '"]').clone(true, true); if (!tile.elements.dragSrcElement.hasClass(tile.classes.unassigned)) { tile.elements.dragSrcElement[0].outerHTML = $droppedOnElement[0].outerHTML; } if (!$droppedOnElement.hasClass(tile.classes.assigned)) { tile.elements.dragSrcElement.remove(); } tile.elements.dragSrcElement[0].innerHTML = $droppedOnElement[0].innerHTML; if ($temp.hasClass(tile.classes.unassigned)) { $temp.removeClass(tile.classes.unassigned).addClass(tile.classes.assigned); $temp.attr('data-index', $droppedOnElement.attr('data-index')); } $temp.insertAfter($droppedOnElement); $droppedOnElement.remove(); $('.' + tile.classes.draggingOver).removeClass(tile.classes.draggingOver); $('.' + tile.classes.dragging).removeClass(tile.classes.dragging); } if (tile.elements.dragSrcElement === null) { tile.helpers.handleDragLeave($droppedOnElement); } return false; }, handleDragEnd: function(elements, classesToRemove) { elements.removeClass(classesToRemove); } }; $(function() { // Attaches drag events tile.elements.$containerTiles.on( 'dragstart', '.tile', tile.helpers.handleDragStart ) .on( 'dragenter', '.tile', tile.helpers.handleDragEnter ) .on( 'dragover' , '.tile', tile.helpers.handleDragOver ) .on( 'dragleave', '.tile', tile.helpers.handleDragLeave ) .on( 'drop' , '.tile', tile.helpers.handleDrop ) .on( 'dragend' , '.tile', function(e) { var tiles = tile.elements.$containerTiles.find('.tile'), classesToRemove = tile.classes.dragging + ' ' + tile.classes.draggingOver; tile.helpers.handleDragEnd(tiles, classesToRemove); }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: