<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>
