<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/hbmuller/pen/raZxJO?limit=all&page=66&q=draggable" />
<link rel='stylesheet prefetch' href='https://meyerweb.com/eric/tools/css/reset/reset.css'>
<style class="cp-pen-styles">/* Courtesy of Rhys Burnie
http://nicolasgallagher.com/micro-clearfix-hack/#comment-29398 */
.test {
*zoom: 1;
}
.test:before, .test:after {
content: "";
display: table;
}
.test:after {
clear: both;
}
body {
font-family: sans-serif;
font-size: 62.5%;
}
.cool-gallery {
*zoom: 1;
}
.cool-gallery:before, .cool-gallery:after {
content: "";
display: table;
}
.cool-gallery:after {
clear: both;
}
.cool-gallery li {
position: relative;
float: left;
width: 25%;
box-sizing: border-box;
padding: 10px;
}
.cool-gallery li a {
display: block;
height: 100%;
padding: 15px;
padding-bottom: 10px;
border: 1px solid #ddd;
border-radius: 2px;
text-decoration: none;
font-size: 1.1em;
background-color: white;
color: inherit;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1);
}
.cool-gallery li a .image-wrapper {
position: relative;
height: 180px;
overflow: hidden;
}
.cool-gallery li a .image-wrapper img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-height: 100%;
min-width: 100%;
}
.cool-gallery li a .replace-caption {
display: block;
width: 100%;
height: 25px;
line-height: 25px;
padding: 0;
margin-top: 10px;
border: none;
text-align: center;
font-size: 1.1em;
box-sizing: border-box;
outline: none;
background-color: white;
}
.cool-gallery li a .replace-caption:hover {
background-color: #ffffdf;
}
.cool-gallery li a .replace-caption:focus {
background-color: white !important;
}
.cool-gallery li .select-picture {
position: absolute;
top: 30px;
left: 30px;
}
.cool-gallery li.selected a {
border-color: #aca;
}
.cool-gallery li.dragging a {
border-color: #090 !important;
}
</style></head><body>
<ul class="cool-gallery">
<li id="li_1"><a href="#">
<div class="image-wrapper"><img src="https://unsplash.it/200/200?image=100"/></div>
<input class="select-picture" type="checkbox"/>
<input class="replace-caption" type="text" placeholder="Image label" value="1"/></a></li>
<li id="li_2"><a href="#">
<div class="image-wrapper"><img src="https://unsplash.it/200/200?image=200"/></div>
<input class="select-picture" type="checkbox"/>
<input class="replace-caption" type="text" placeholder="Image label" value="2"/></a></li>
<li id="li_3"><a href="#">
<div class="image-wrapper"><img src="https://unsplash.it/200/200?image=300"/></div>
<input class="select-picture" type="checkbox"/>
<input class="replace-caption" type="text" placeholder="Image label" value="3"/></a></li>
<li id="li_4"><a href="#">
<div class="image-wrapper"><img src="https://unsplash.it/200/200?image=400"/></div>
<input class="select-picture" type="checkbox"/>
<input class="replace-caption" type="text" placeholder="Image label" value="4"/></a></li>
<li id="li_5"><a href="#">
<div class="image-wrapper"><img src="https://unsplash.it/200/200?image=500"/></div>
<input class="select-picture" type="checkbox"/>
<input class="replace-caption" type="text" placeholder="Image label" value="5"/></a></li>
<li id="li_6"><a href="#">
<div class="image-wrapper"><img src="https://unsplash.it/200/200?image=600"/></div>
<input class="select-picture" type="checkbox"/>
<input class="replace-caption" type="text" placeholder="Image label" value="6"/></a></li>
<li id="li_7"><a href="#">
<div class="image-wrapper"><img src="https://unsplash.it/200/200?image=700"/></div>
<input class="select-picture" type="checkbox"/>
<input class="replace-caption" type="text" placeholder="Image label" value="7"/></a></li>
<li id="li_8"><a href="#">
<div class="image-wrapper"><img src="https://unsplash.it/200/200?image=800"/></div>
<input class="select-picture" type="checkbox"/>
<input class="replace-caption" type="text" placeholder="Image label" value="8"/></a></li>
<li id="li_9"><a href="#">
<div class="image-wrapper"><img src="https://unsplash.it/200/200?image=900"/></div>
<input class="select-picture" type="checkbox"/>
<input class="replace-caption" type="text" placeholder="Image label" value="9"/></a></li>
<li id="li_10"><a href="#">
<div class="image-wrapper"><img src="https://unsplash.it/200/200?image=1000"/></div>
<input class="select-picture" type="checkbox"/>
<input class="replace-caption" type="text" placeholder="Image label" value="10"/></a></li>
</ul>
<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 >function coolGallery(target){
this.init = function(target){
this.setup(target);
this.bind();
};
this.setup = function(target){
this.elements = document.querySelector(".cool-gallery").children;
this.isDragging = false;
};
this.bind = function(){
var _this = this;
for(i=0;i<_this.elements.length;i++){if (window.CP.shouldStopExecution(1)){break;}
(function(){
var element = _this.elements[i];
element.addEventListener("dragstart",function(e){ _this.dragBegin(this,e); });
element.addEventListener("dragenter",function(e){ _this.dragOver(this,e); });
element.addEventListener("dragend",function(e){ _this.dragEnd(this,e); });
element.addEventListener("drop",function(e){ e.preventDefault(); return false; });
// LI
element.setAttribute("draggable", true);
// A
element.children[0].setAttribute("draggable", false);
// IMG
element.querySelector("img").setAttribute("draggable", false);
// Mark Image
element.querySelector("[type='checkbox']").addEventListener("change",function(e){
element.classList.toggle("selected",this.checked);
});
})();
}
window.CP.exitedLoop(1);
};
this.reorder = function(element,target){
var parent = element.parentElement;
if(parent == target.parentElement){
var children = Array.prototype.slice.call(parent.children);
var indexElement = children.indexOf(element);
var indexTarget = children.indexOf(target);
if(indexTarget >= children.length - 1){
parent.appendChild(element);
}else if(indexTarget == indexElement + 1){
parent.insertBefore(element,children[indexTarget + 1]);
}else{
parent.insertBefore(element,target);
}
}
};
this.dragBegin = function(element,e){
this.current = element;
element.classList.add('dragging');
e.dataTransfer.setData('text/plain', "It’s Dangerous to go Alone! Take This")
};
this.dragOver = function(element,e){
if(element !== this.current){
this.reorder(this.current,element);
}
};
this.dragEnd = function(element,e){
element.classList.remove('dragging');
this.current = undefined;
e.preventDefault();
};
// And now: Turn this mo'fucka' on!
this.init(target);
}
var teste = new coolGallery(".cool-gallery");
//# sourceURL=pen.js
</script>
</body></html>
