Sortable with trashcan

Drag and drop sortable with trashcan. Uses Element.Collide() external Class.

by escoffie

HTML

<script src="https://raw.github.com/jnbdz/elCollide/master/Source/Element.collide.js"></script>
<ul id="sortable-list">
    <li title="1" id="1" data-rel="Item 1" class="list"><span class="draggable">Drag here: </span>Primero</li>
    <li title="2" id="2" data-rel="Item 2" class="list"><span class="draggable">Drag here: </span>Segundo</li>
    <li title="3" id="3" data-rel="Item 3" class="list"><span class="draggable">Drag here: </span>Tercero</li>
    <li title="4" id="4" data-rel="Item 4" class="list"><span class="draggable">Drag here: </span>Cuarto</li>
    <li title="5" id="5" data-rel="Item 5" class="list"><span class="draggable">Drag here: </span>Quinto</li>
    <li title="6" id="6" data-rel="Item 6" class="list"><span class="draggable">Drag here: </span>Sexto</li>
</ul>
<div id="trashcan">
    <p>Trashcan here</p>
</div>

CSS

#sortable-list {
    width:45%;
    float:left;
    margin-right:5px;
}
.list {
    display:block;
    margin:3px;
    padding:3px;
    border:solid 1px black;
    background:#EFEFEF;
}
.list span { 
    color:red; 
    font-weight:bold;
    cursor:move;    
}
#trashcan {
    border:solid 1px black;
    background:#FFCCCC;
    padding:5px;
    margin:5px;
    float:right;
}

JavaScript

var acomoda = null;
acomoda = new Sortables('#sortable-list', {
    clone: true,
    revert: true,
    handle: '.draggable',
    opacity: 0.5,
    dragOptions: {

        onDrop: function(element) {
            var basura = $('trashcan');
            acomoda.destruye = false;
            if (element.collide(basura)) {
                console.log(element, 'colisionado con', basura);
                acomoda.destruye = true;
            }
        }
    },
    onComplete: function(element) {
        if (acomoda.destruye) {
            console.log('Destruir', element);
            element.nix();
        }
    }
});