Draggable + Sortable como droopable Jquery
Este ejemplo es una prueba de tener un sortable que a la vez es un dropable con sortable en el interior
by EDWIN MAURICIO QUISHPE MALDONADO
HTML
<ul id="answers">
<li>Item 1 (+)</li>
<li>Item 2 (+)</li>
<li>Item 3 (+)</li>
<li>Item 4 (+)</li>
</ul>
<div id="contenedor">
<ul class="container">
</ul>
<ul class="container">
</ul>
</div>
CSS
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; border: 1px solid #999; cursor: pointer; }
#answers { position: relative; float: left; width: 170px; border: 1px solid red; margin-right: 20px; }
.container { position: relative; float: left; width: 170px; border: 1px solid blue; margin-right: 10px; min-height: 40px; padding-left:30px;}
#contenedor{
position:relative;
float: left;
border: 1px solid green;
clear:both;
min-height:100px;
width: 204px;
padding:2px;
height:auto !important;
}
JavaScript
$(function() {
$("#answers li").draggable({
connectToSortable: '.container,#contenedor',
helper: 'clone',
revertDuration: 0
});
$(".container").sortable({
connectWith: '.container',
revert: true
});
$(".container li").draggable({
connectToSortable: '.container',
revert: "invalid",
});
$("ul, li").disableSelection();
$("#contenedor").sortable({
connectWith: '.container',
revert: true
});
});