In my program:
$(document).ready(function(){
var $lista1 = $('#lista1'), $lista2 = $('#lista2');
// lista 1
$('li',$lista1).draggable({
revert: 'invalid',
helper: 'clone',
cursor: 'move'
});
$lista1.droppable({
accept: '#lista2 li',
drop: function(ev, ui) {
deleteLista2(ui.draggable);
}
});
/* lista2 */
$('li',$lista2).draggable({
revert: 'invalid',
helper: 'clone',
cursor: 'move'
});
$lista2.droppable({
accept: '#lista1 > li',
drop: function(ev, ui) {
deleteLista1(ui.draggable);
}
});
// listas
function deleteLista1($item) {
$item.fadeOut(function() {
$($item).appendTo($lista2).fadeIn();;
});
$item.fadeIn();
}
function deleteLista2($item) {
$item.fadeOut(function() {
$item.appendTo($lista1).fadeIn();
});
}
});body,td,th {
color: #333333;
}
#lista1, #lista2 {
width:200px;
border:1px solid #990000;
height:auto;
float:left;
margin-right:5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="demo-frame">
<ul id="lista1" class="gallery">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
<ul id="lista2">
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
</ul>
</div>You can move the rows from one list to another, but what I want is that the edge has a space, because when you move an item and pass it to another list the edge shrinks and the problem is that when does not have any item, a list that stays as a line and it's hard to enter an item.
Please, I need your help.