jQuery Sortable + Droppable vs Draggable специальная функциональность

Question

Я пытаюсь создать функциональность, которая позволяет перетаскиваемому списку элементов (левый столбец) перетаскивать в сортируемый список (правый столбец). Отличительной особенностью простого подключения к ConnectToSortable является то, что мне нужно, чтобы сортируемый список действовал как список с возможностью сбрасывания, поскольку порядок элементов сохраняется в правом столбце ТОЛЬКО при перетаскивании новых элементов, но НЕ при переупорядочении порядка между элементами уже в правом столбце.

Ссылка ниже показывает первую часть этой функциональности. Я могу перетащить элементы в нужный раздел. Я хочу также иметь возможность переупорядочить эти элементы, как только помещены в правую колонку. Кроме того, я хочу добавить класс при перетаскивании и изменить класс элемента

после удаления. Я бесконечно экспериментировал со всем этим. Я до сих пор на глубине около 15 часов и везде бью кирпичные стены. Я даже не знаю, как подойти к этим проблемам.

Ссылка

Я хочу скопировать отсюда:

<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>

в:

<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>

А вот и 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({

    });
}

);

Любая помощь приветствуется! Спасибо!

Answer 1

Я думаю, что могу сказать вам, в чем ваша проблема, но не обязательно, как ее исправить:

Вы пытаетесь перетащить DIV слева и привязать их к LI справа, но вы попытались соединить коллекцию div с списком заказов элементов списка, в которых есть DIV. Это не сработает. Вам необходимо соединить две коллекции одинаковых элементов, например упорядоченный список, с другим списком.

Я открыл firebug и увеличил отступы на ваших LI следующим образом:

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

Затем я попытался отсортировать LI, перетаскивая один из них в нужную область, и он сортировался так, как я ожидал, но DIV, который, казалось, был в нем, остался на месте, подтверждая мое подозрение, что эти коллекции не связаны должным образом. Почему бы просто не иметь упорядоченный список с обеих сторон, тогда это будет легко?