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 のコレクションを接続しようとしました。これはうまくいきません。順序付けられたリストなど、アイテムの 2 つのコレクションを別のリストに接続する必要があります。

私はfirebugを開き、次のようにLIのパディングを増やしました:

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

次に、LI を右の領域にドラッグして並べ替えようとしたところ、期待どおりに並べ替えられましたが、そこにあるように見えた DIV が所定の位置に留まり、これらのコレクションが適切にリンクされていないという疑いが確認されました。 . 両側に順序付きリストを持たないのはなぜですか?そうすれば簡単になりますか?

于 2009-11-18T01:47:34.567 に答える