"Draggable Panels Bootstrap"
Bootstrap 3.0.0 Snippet by VikasChaurasia264

<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 ----------> <div class="container"> <section class="wrapper--tiles cf"> <div class="row"> <div class="col-sm-6"> <div class="bg-color"> <div class="row"> <div class="col-sm-4"> <ul class="wrapper--assigned-tiles unstyled-list cf"> <li class="tile assigned-tile" draggable="true" data-index="0"> <img src="https://i.ibb.co/2vtJ3XR/user.png" alt="user" width="100%"> </li> </ul> </div> <div class="col-sm-4"> <ul class="wrapper--assigned-tiles unstyled-list cf"> <li class="tile assigned-tile" draggable="true" data-index="1"> <img src="https://i.ibb.co/KwRGRHr/1.jpg" alt="1" width="100%"> </li> </ul> </div> <div class="col-sm-4"> <ul class="wrapper--assigned-tiles unstyled-list cf"> <li class="tile assigned-tile" draggable="true" data-index="2"> <img src="https://i.ibb.co/S7jzRR7/2.jpg" alt="2" width="100%"> </li> </ul> </div> <div class="col-sm-4"> <ul class="wrapper--assigned-tiles unstyled-list cf"> <li class="tile assigned-tile" draggable="true" data-index="3"> <img src="https://i.ibb.co/4ZYpgGY/4.jpg" alt="4" width="100%"> </li> </ul> </div> <div class="col-sm-4"> <ul class="wrapper--assigned-tiles unstyled-list cf"> <li class="tile assigned-tile" draggable="true" data-index="4"> <img src="https://i.ibb.co/Yk32VZ2/5.jpg" alt="5" width="100%"> </li> </ul> </div> <div class="col-sm-4"> <ul class="wrapper--assigned-tiles unstyled-list cf"> <li class="tile assigned-tile" draggable="true" data-index="5"> <img src="https://i.ibb.co/vPyrGr5/6.jpg" alt="6" width="100%"> </li> </ul> </div> <div class="col-sm-4"> <ul class="wrapper--assigned-tiles unstyled-list cf"> <li class="tile assigned-tile" draggable="true" data-index="6"> <img src="https://i.ibb.co/2vtJ3XR/user.png" alt="user" width="100%"> </li> </ul> </div> <div class="col-sm-4"> <ul class="wrapper--assigned-tiles unstyled-list cf"> <li class="tile assigned-tile" draggable="true" data-index="7"> <img src="https://i.ibb.co/4ZYpgGY/4.jpg" alt="4" width="100%"> </li> </ul> </div> <div class="col-sm-4"> <ul class="wrapper--assigned-tiles unstyled-list cf"> <li class="tile assigned-tile" draggable="true" data-index="8" width="100%"> <img src="https://i.ibb.co/KwRGRHr/1.jpg" alt="1" width="100%"> </li> </ul> </div> </div> </div> </div> <div class="col-sm-6"> <div class="bg-color"> <div class="row"> <div class="col-sm-4"> <ul class="wrapper--assigned-tiles unstyled-list cf"> <li class="tile" draggable="true" data-index="9"></li> </ul> </div> <div class="col-sm-4"> <ul class="wrapper--assigned-tiles unstyled-list cf"> <li class="tile" draggable="true" data-index="10"></li> </ul> </div> <div class="col-sm-4"> <ul class="wrapper--assigned-tiles unstyled-list cf"> <li class="tile" draggable="true" data-index="11"></li> </ul> </div> <div class="col-sm-4"> <ul class="wrapper--assigned-tiles unstyled-list cf"> <li class="tile" draggable="true" data-index="12"></li> </ul> </div> <div class="col-sm-4"> <ul class="wrapper--assigned-tiles unstyled-list cf"> <li class="tile" draggable="true" data-index="13"></li> </ul> </div> <div class="col-sm-4"> <ul class="wrapper--assigned-tiles unstyled-list cf"> <li class="tile" draggable="true" data-index="14"></li> </ul> </div> <div class="col-sm-4"> <ul class="wrapper--assigned-tiles unstyled-list cf"> <li class="tile" draggable="true" data-index="15"></li> </ul> </div> <div class="col-sm-4"> <ul class="wrapper--assigned-tiles unstyled-list cf"> <li class="tile" draggable="true" data-index="16"></li> </ul> </div> <div class="col-sm-4"> <ul class="wrapper--assigned-tiles unstyled-list cf"> <li class="tile" draggable="true" data-index="16"></li> </ul> </div> </div> </div> </div> </div> </section> </div>
.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 { float: left; width: 100%; /*-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: 160px; width: 100%; overflow: hidden; } .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; } .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; } .bg-color { background: #e6e6e6; padding: 10px 20px; }
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

Related: See More


Questions / Comments: