Sorting vertical connected lists
HTML
<script src="http://github.com/kerberoS/jQuery-Tweets/raw/master/js/jquery.tweets.0.1.js"></script>
<a href="http://stackoverflow.com/questions/4630628/how-can-i-drag-from-a-connected-vertical-list-to-the-first-item-of-a-another-list">http://stackoverflow.com/questions/4630628/how-can-i-drag-from-a-connected-vertical-list-to-the-first-item-of-a-another-list</a><br/>
<ul id="sortable1" class="connectedSortable">
<li class="question">Question 1</li>
<li class="question">Question 2</li>
<li class="question">Question 3</li>
<li class="question">Question 4</li>
<li class="question">Question 5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="answer">Answer 1</li>
<li class="answer">Answer 2</li>
<li class="answer">Answer 3</li>
<li class="answer">Answer 4</li>
<li class="answer">Answer 5</li>
</ul>
CSS
#sortable1, #sortable2 {
list-style-type: none;
margin: 12px;
padding: 12px;
border: 1px solid #CCC;
}
#sortable1 li, #sortable2 li {
margin: 6px;
padding: 12px;
font-size: 1.2em;
width: 120px;
}
.question{
background-color: #517397;
}
.answer{
background-color: #517376;
}
.ui-state-highlight {
background-color: #FFF;
border: 1px dashed #517376;
height: 20px;
}
JavaScript
/*
Sorting vertical connected lists
This snipped is an example of an error I have when sorting an item from one list to another. I can move an answer to the last position in questions. However when I try to do the opposite: move a question to the top of the answers list the placeholder always goes to the second position in the list.
*/
$('.connectedSortable').sortable({
axis: 'y',
connectWith: ".connectedSortable",
placeholder: "ui-state-highlight",
distance: 10,
items: "li:not(.sort-disabled)"
});