I have a list of items (ul li) and 7 different divs with a different color each, I would like to drag an item from the list to a div, allowing to move that item to the different divs if necessary ... I hope to explain myself better with the image:
The code is something like this (it's also on jsfiddle.net )
$(function() {
$("#sortable1").sortable({
connectWith: ".connectedSortable",
remove: function(event, ui) {
ui.item.clone().appendTo('#sortable2');
$(this).sortable('cancel');
}
}).disableSelection();
$("#sortable2").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});#sortable1,
#sortable2 {
list-style-type: none;
margin: 0;
padding: 0;
float: left;
margin-right: 10px;
}
#sortable1 li,
#sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}<!-- jQuery y jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>
<!-- HTML -->
<div class="demo">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
</div>
<!-- End demo -->