1

我正在尝试创建一个功能，允许将可拖动的项目列表（左列）拖到可排序列表（右列）上。仅执行 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({

    });
}

);

任何帮助表示赞赏！谢谢！

4

1 回答 1

0

我想我可以告诉你你的问题是什么，但不一定是如何解决它：

您正试图从左侧拖动 DIV，并将它们对齐到右侧的 LI，但您已尝试将 div 集合连接到其中包含 DIV 的列表项的顺序列表。这行不通。您需要将两个相似项目的集合（例如有序列表）连接到另一个列表。

我打开了 firebug 并像这样增加了 LI 上的填充：

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

然后我尝试通过在正确的区域拖动一个 LI 来对 LI 进行排序，它的排序方式与我预期的一样，但是 DIV 似乎在其中，但仍保留在原位，这证实了我怀疑这些集合没有正确链接. 为什么不只是两边都有一个有序列表，那会容易吗？

于 2009-11-18T01:47:34.567 回答