jqueryで要素を上下に移動

Question

ご協力いただきありがとうございます！現在、ユーザーがアイテムを上下に移動できるようにするために、私はソート可能なコードを使用しています。今、これらのアイテムのそれぞれに、「上」ボタンと「下」ボタンのセットを与えて、ユーザーがクリックしてアイテムを上下に移動できるようにしたいと思います。私は何とか私は右の要素にjqueryのを適用しないと思う

jQuery Sortable Move UP/DOWN Button move up/down in jquery

...私は論文の投稿を再加工しようとしましたが、私は何かを明らかに不足しているように見えます。私のjsfiddleはここにあります：http://jsfiddle.net/kevindp78/vexw5/2/とコードは以下の通りです。

HTML

<div id="box" class="ui-sortable" style="display: block;"> 
<div class="leg"> 
    <a class="image">IMG1</a> 
    <div class="details"> 
     <h3><a href="/details">Info</a></h3> 
     <span class="moreinfo">MoreInfo</span> 
    </div> 
    <div class="clear"></div> 
    <div class="up-down"> 
     <p>Change Order</p> 
     <div class="up"> 
      <input type="button" value="Up" class="up-button"/> 
     </div> 
     <div class="down"> 
      <input type="button" value="down" class="down-button"/> 
     </div> 
    </div> 
    <div class="morestuff"> 
     Stuff1 
    </div> 
</div> 
<div class="leg"> 
    <a class="image">IMG2</a> 
    <div class="details"> 
     <h3><a href="/details">Info</a></h3> 
     <span class="moreinfo">MoreInfo</span> 
    </div> 
    <div class="clear"></div> 
    <div class="up-down"> 
     <p>Change Order</p> 
     <div class="up"> 
      <input type="button" value="Up" class="up-button"/> 
     </div> 
     <div class="down"> 
      <input type="button" value="down" class="down-button"/> 
     </div> 
    </div> 
    <div class="morestuff"> 
     Stuff2 
    </div> 
</div> 
<div class="leg"> 
    <a class="image">IMG3</a> 
    <div class="details"> 
     <h3><a href="/details">Info</a></h3> 
     <span class="moreinfo">MoreInfo</span> 
    </div> 
    <div class="clear"></div> 
    <div class="up-down"> 
     <p>Change Order</p> 
     <div class="up"> 
      <input type="button" value="Up" class="up-button"/> 
     </div> 
     <div class="down"> 
      <input type="button" value="down" class="down-button"/> 
     </div> 
    </div> 
    <div class="morestuff"> 
     Stuff3 
    </div> 

</div> 

JS

$('up-button').click(function(){ 
$(this).parent('.leg').insertBefore.previous('.leg') 
}); 

$('.down-button').click(function(){ 
$(this).parent('.leg').insertAfter.next('.leg') 
}); 

Answer 1

コードで対処するにはいくつかの問題がありますので、順番に調べてみましょう。

最初に$('up-button')があります。.がありませんので、ボタンは選択されません。

次に、parent()メソッドを使用している場合は、レベルが1つ上がるだけですが、代わりにparents('.leg')を使用してください。

insertBefore()は、選択したコンテンツをどこに配置するかについてのターゲットを受け入れる方法です。

previous()は機能ではなく、prev()であり、以前の要素を選択するだけでパラメータは必要ありません。

あなたがそれらの修正の全てを組み合わせた場合は、この編集したフィドルに実証されているように、あなたがこの

$('.up-button').click(function(){ 
    $(this).parents('.leg').insertBefore($(this).parents('.leg').prev()); 
}); 

$('.down-button').click(function(){ 
    $(this).parents('.leg').insertAfter($(this).parents('.leg').next()); 
}); 

のようなものになるだろうセミコロンのhttp://jsfiddle.net/vexw5/6/

Answer 2

あなたはこのようなもので、あなたのJSを交換してみてください：

$(".down").click(function() { 
    var $parent = $(this).parents(".leg"); 
    $parent.insertAfter($parent.next()); 
}); 

$(".up").click(function() { 
    var $parent = $(this).parents(".leg"); 
    $parent.insertBefore($parent.prev()); 
}); 

http://jsfiddle.net/vexw5/7/

これは単なる基本です。アニメーションや何もありません。