Jqueryを使用してdivタグを上下に移動

Question

私は最終的なプロジェクトのためにto doアプリケーションを作ろうとしています。私が抱えている問題は、ユーザーが何をクリックしたかによってdivタグを要素の上下に移動できるようにすることです。私は既存のdivタグでこの作業を行うことができますが、コードが分割されたdivタグが追加されています。どんな洞察力も大いに評価されます。私はcodepen上にコードを持っていますので、そこにリンクを提供し、ここに私のコードを表示します。

$('#addTask').click(function(){ 
    var task = $('#taskadd').val(); 
    var date = $('#datepicker').val(); 
     $('<div id="items"><div class="card-header"><span class="up" id="up"></span><span class="down" id="down"></span><p>Due Date:'+date+'</p><p>Task:'+task+'</p><div></div>').appendTo('.container').slideDown('slow');; 
    resetModal(); 
    counter++; 
    }); 
    var selected=0; 

    var itemlist = $('#items'); 
    var len=$(itemlist).children().length; 
    console.log(len); 

    $(document).on('click', '#items div',function(){ 
     selected= counter; 

     alert("Selected item is " + selected); 
    }); 

    $(document).on('click', '#up',function(e){ 

     e.preventDefault(); 
     if(selected>0) 
     { 

      jQuery($(itemlist).children().eq(selected-1)).before(jQuery($(itemlist).children().eq(selected))); 
      selected=selected-1; 
     } 
    }); 

    $(document).on('click', '#down',function(e){ 
     e.preventDefault(); 
     if(selected < len) 
     { 
      jQuery($(itemlist).children().eq(selected+1)).after(jQuery($(itemlist).children().eq(selected))); 
      selected=selected+1; 
     } 
    }); 



}); 

マイコードコード：http://codepen.io/louis345/pen/dOqdQWです。

ご協力いただきますようお願い申し上げます。うまくいけば私の問題は明らかです。

Answer 1

まず、複数の要素にIDを使用しないで、代わりにクラスを使用してください（#upと#downについて話す）。

jQueryでは、現在クリックされている要素を取得し、クローンして元の要素を削除しながら、前/次の要素の上または下に追加します。あなたは、私が要素のクローンを作成する必要はありませんので、<span class="arrows moveUp"></span>と<span class="arrows moveDown"></span>

$(".arrows").on('click', function(e){ 
    e.preventDefault(); 
    var task = (this).parent(); 
    var currentElement = task.clone(true); 
    if ($(this).hasClass("moveUp") && task.prev().length > 0) { 
    task.prev().before(currentElement); 
    } else if ($(this).hasClass("moveDown") && task.next().length > 0) { 
    task.next().after(currentElement); 
    } 
    task.remove(); 
});