jQuery Sortable+Droppable vs Draggable special functionality

Question

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 know this is ancient, but I don't understand what you want. Why doesn't simply making the right-hand list sortable do what you want? You said "I want the list on the right to ONLY be sortable with elements that are already in it", but that doesn't make sense -- why are you trying to prevent nonexistent items from doing anything? — Martha

Josh Pearce Josh Pearce · Accepted Answer · 2009-11-18T01:47:34

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?

jQuery Sortable+Droppable vs Draggable special functionality

1 Answers