<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
