Question

我正在尝试创建一个功能，允许将可拖动的项目列表（左列）拖到可排序列表（右列）上。关于connectToSortable的不同之处在于我需要将可排序列表作为可放置列表的ACT，因为只有在拖动新项目时，项目的顺序才会保留在右列上，而不是在项目之间重新排列顺序时已经在右栏中。

以下链接显示了该功能的第一部分。我可以将项目拖到我想要的部分。我希望能够在右列中重新排列这些项目。另外，我想在拖动时添加一个类，并在删除后更改

元素的类。我已经无休止地尝试了所有这些。到目前为止我大约15个小时深，到处都是砖墙。我甚至不知道如何处理这些问题。

Link

我想从这里复制：

<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的列表项的订单列表。这不行。您需要将两个类似项目的集合（例如有序列表）连接到另一个列表。

我打开了萤火虫并增加了你的LIs填充：

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

然后我尝试通过在右侧区域拖动一个LI来对它进行排序，它按照我的预期进行排序，但看起来就像它的DIV一直保留在原位，证实了我怀疑这些集合是没有正确联系。为什么不在双方都有一个有序列表，那么它会很容易吗？

jQuery Sortable + Droppable vs Draggable特殊功能

1 个答案: