Sortable.js Demo

by efattal

HTML

<script src="http://sortablejs.github.io/Sortable/Sortable.js"></script>
<ul id="items">
    <li class="item">
        <div class="item__title">Item1</div>
        <div class="item__content">Traditional "visual" languages (with boxes and arrows) visualize program structure. This is the wrong thing to visualize! An artist doesn't want to build a machine to draw pictures -- he wants to draw the pictures themselves. Substroke visualizes the data, not the code. Machinery is minimized.</div>
    </li>
    <li class="item">
        <div class="item__title">Item2</div>
        <div class="item__content">Some text</div>
    </li>
    <li class="item">
        <div class="item__title">Item3</div>
        <div class="item__content">Some text</div>
    </li>
</ul>

CSS

#items {
    list-style: none;
}
#items li {
    width: 100%;
    margin: 10px;
    background-color: #fff;
    box-shadow: 1px 3px 5px #aaa;
}
.item__title {
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #eaeaea;
}
.item__content {
    padding: 10px;
}
.item--ghost {
    opacity: 0.5;
}

JavaScript

Array.prototype.test = function(){};

var el = document.getElementById('items');

var sortable = Sortable.create(el, {
    animation: 150,
    handle: '.item__title',
    draggable: ".item",
    ghostClass: "item--ghost"
});