-9

私のHTMLは次のとおりです。

<div id="line1"> <a>down</a> </div>
<div id="line2"> <a>up</a> <a>down</a> </div>
<div id="line3"> <a>up</a> <a>down</a> </div>
<div id="line4"> <a>up</a> <a>down</a> </div>
<div id="line5"> <a>up</a> </div>

アップリンクまたはダウンリンクをクリックすると、div がそれぞれ交換されます。

ドラッグ アンド ドロップ機能を探しているわけではありません。

4

1 に答える 1

8

アップ/ダウン リンクにクラスを追加します。

<div id="menu">
    <div id="line1"> A <a class='up'>up</a> <a class='down'>down</a></div>
    <div id="line2"> B <a class='up'>up</a> <a class='down'>down</a></div>
    <div id="line3"> C <a class='up'>up</a> <a class='down'>down</a></div>
    <div id="line4"> D <a class='up'>up</a> <a class='down'>down</a></div>
    <div id="line5"> E <a class='up'>up</a> <a class='down'>down</a></div>
</div>

CSS を追加して、未使用の最初と最後のリンクを非表示にします。

#menu > div:first-child a:first-child,
#menu > div:last-child  a:last-child { display: none; }

jQuery:

$('#menu').on('click', 'a', function() {
    var divs = $('#menu > div');
    var p = $(this).parent();
    var pos = p.index();

    if($(this).hasClass('up')) {
        p.insertBefore(divs.eq(--pos));
    }
    else if($(this).hasClass('down')) {
        p.insertAfter(divs.eq(++pos));
    }
});

http://jsfiddle.net/samliew/P4Xaf/

于 2013-04-13T15:46:55.110 に答える