jQuery Sortable+Droppable vs Draggable special functionality

I'm trying to make a functionality that allows for a draggable list of items (left column) to be dragged onto a sortable list (right column). What is different about just doing a connectToSortable is that I need the sortable list to ACT like a droppable list, in that the order of the items is retained on the right column ONLY when dragging new items but NOT when re-arranging the order between items already in the right column.

The link below shows the first part of that functionality. I can drag items to the section I desire. I want to also be able to re-arrange those items once placed in the right column. Additionally, I want to add a class while dragging, and change a class of a

element once dropped. I have experimented endlessly with all of this. I'm about 15 hours deep so far and I'm hitting brick walls everywhere. I don't even know how to approach these problems.

Link

I want to copy from here:

<div id="lc">
<div class="block"><img src="../../resources/skins/crowdtwist.com/images/artist_center/pscales_merch.jpg" alt="Merchandise" /></div></li>
<div class="block"><img src="../../resources/skins/crowdtwist.com/images/artist_center/pscales_facebook.jpg" alt="Facebook" /></div></li>
<div class="block"><img src="../../resources/skins/crowdtwist.com/images/artist_center/pscales_tickets.jpg" alt="Tickets" /></div></li>
<div class="block"><img src="../../resources/skins/crowdtwist.com/images/artist_center/pscales_artistsite.jpg" alt="Artist Site" /></div></li>
<div class="block"><img src="../../resources/skins/crowdtwist.com/images/artist_center/pscales_myspace.jpg" alt="Myspace" /></div></li>
<div class="block"><img src="../../resources/skins/crowdtwist.com/images/artist_center/pscales_twitter.jpg" alt="Twitter" /></div></li>
<div class="block"><img src="../../resources/skins/crowdtwist.com/images/artist_center/pscales_music.jpg" alt="Music" /></div></li>
</div>

into:

<div id="rc">
<ul id="right_col" class="ib-fix demo-ul"><!-- 
    --><li><div class="right_block" id="right_block_1"><p class="empty">1</p></div></li><!--
    --><li><div class="right_block" id="right_block_2"><p class="empty">2</p><开发者_如何学运维;/div></li><!--
    --><li><div class="right_block" id="right_block_3"><p class="empty">3</p></div></li><!--
    --><li><div class="right_block" id="right_block_4"><p class="empty">4</p></div></li><!--
    --><li><div class="right_block" id="right_block_5"><p class="empty">5</p></div></li><!-- 
    --><li><div class="right_block" id="right_block_6"><p class="empty">6</p></div></li><!--
    --><li><div class="right_block" id="right_block_7"><p class="empty">7</p></div></li><!--
    --></ul>
</div>

And here's the JS

$(document).ready(
function()
{
/*  $("#right_col > li").droppable({
  activeClass: '.beingDragged'
});*/
    $(".block").draggable({ 
        snap: '#right_col > li', 
        snapMode: 'inner',
        snapTolerance: '30',
        connectToSortable:'#right_col',
        start: function(event, ui) { $(ui.item).addClass('beingDragged'); },
        stop: function(event, ui) { $(ui.item).removeClass('beingDragged'); }   
        });



    $('#right_col').sortable({

    });
}

);

Any help is appreciated!! Thank you!

I think I can tell you what your problem is, but not necessarily how to fix it:

You are trying to drag DIVs from the left, and snap them into LIs on the right, but you have tried to connected a collection of divs to an order list of list items that have DIVs in them. This won't work. You need to connect two collections of like items, such as an ordered list to another list.

I opened up firebug and increased the padding on your LIs like this:

$('#right_col > li').css({padding: '15px'});

Then I tried to sort the LIs by dragging one around the right area, and it sorted like I expected it to, but the DIV, that seemed like it was in it, stayed in place, confirming my suspicion that these collections are not linked properly. Why not just have an ordered list on both sides, then it will be easy?