sortable with droppable problem

by InviS

HTML

<ul class='list'>
    <li></li>
    <li></li>
    <li></li>
</ul>
<div class='trash'></div>
<div></div>
<ul class='list'>
    <li></li>
    <li></li>
    <li></li>
</ul>
<div class='trash'></div>

CSS

ul{display: inline-block;}
ul li{display: inline-block; width: 50px; height: 50px; margin: 15px; background: green;}
.trash{display: inline-block; width: 50px; height: 50px; background: red; margin: 15px;}

JavaScript

$('ul').sortable({
    connectWith: '.list',
    tolerance: 'pointer'
});

$('.trash').droppable({
    accept: 'li',
    drop: function(){
        console.log('dropped');
    }
});