<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 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/safx/pen/dasnt" />
<style class="cp-pen-styles">body {
background-color: #eee;
}
.q div {
width: 200px;
height: 50px;
border: solid 1px #ccc;
box-shadow: 0 1px 2px 0px #888;
background-color: #f8f8f8;
margin: 5px;
display: inline-block;
position: absolute;
transition: top 400ms;
}
.q div#placeholder {
opacity: 0.2;
}
</style></head><body>
<div id="some-list" class="q" droppable="true" v-on="dragover:dragover, drop:drop">
<div v-repeat="items" draggable="true" v-on="dragstart:dragstart, dragend:dragend, dragover:dragover, dragenter:dragenter">{{text}}</div>
</div>
<div id="placeholder">placeholder</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/vue/0.9.3/vue.min.js'></script>
<script >// Generated by LiveScript 1.5.0
(function(){
new Vue({
el: '#some-list',
data: {
items: [1, 2, 3, 4, 5].map(function(it){
return {
text: "Item-" + it,
qqq: it
};
}),
_dragElem: null,
_insertIndex: null,
_placeholder: document.getElementById('placeholder')
},
methods: {
reorder: function(){
var sty_elem, s, i$, to$, i, e, sourceIndex, rule;
sty_elem = document.createElement('style');
document.head.appendChild(sty_elem);
sty_elem.appendChild(document.createTextNode(''));
s = sty_elem.sheet;
for (i$ = 0, to$ = this.items.length; i$ <= to$; ++i$) {if (window.CP.shouldStopExecution(1)){break;}
i = i$;
e = i;
if (this._dragElem != null) {
sourceIndex = this._dragElem.$index;
if (sourceIndex < e) {
--e;
}
}
rule = ".q div:nth-child(" + (i + 1) + ") {top:" + e * 50 + "px }";
s.insertRule(rule, s.cssRules.length);
}
window.CP.exitedLoop(1);
},
dragstart: function(ev){
var st;
this._dragElem = ev.targetVM;
this._dragNode = ev.target;
this.reorder();
st = this._dragNode.style;
Vue.nextTick(function(){
st.opacity = 0;
st.height = 0;
});
this.$el.insertBefore(this._placeholder, ev.target);
},
dragend: function(ev){
this.$el.removeChild(this._placeholder);
this._dragNode.style.opacity = 1;
this._dragNode.style.height = '50px';
this._dragNode = null;
this._dragElem = null;
this.reorder();
ev.preventDefault();
},
drop: function(ev){
var insertIndex, sourceIndex, removed;
insertIndex = this._insertIndex;
sourceIndex = this._dragElem.$index;
if (sourceIndex === insertIndex) {
return;
}
removed = this.items.splice(sourceIndex, 1);
this.items.splice(insertIndex, 0, removed[0]);
this.dragend(ev);
},
dragover: function(ev){
ev.preventDefault();
return true;
},
dragenter: function(ev){
var sourceIndex, insertIndex, posElem;
sourceIndex = this._dragElem.$index;
insertIndex = ev.targetVM.$index;
this._insertIndex = insertIndex;
posElem = sourceIndex < insertIndex
? ev.target
: ev.target.previousSibling;
this.$el.insertBefore(this._placeholder, posElem.nextSibling);
ev.preventDefault();
return true;
}
},
created: function(){
this.reorder();
}
});
}).call(this);
//# sourceURL=pen.js
</script>
</body></html>
