Перемещение добавленного тега Div вверх и вниз с помощью JQuery

Question

Я пытаюсь сделать приложение для моего окончательного проекта. Проблема, с которой я столкнулась, - это чтобы теги 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; 
     } 
    }); 



}); 

My codepen: http://codepen.io/louis345/pen/dOqdQW.

Любая помощь будет принята с благодарностью. Надеюсь, моя проблема понятна.

Answer 1

Прежде всего, вы не должны использовать идентификаторы для нескольких элементов, вместо этого используйте классы (говоря о #up и #down).

В jQuery попытайтесь получить в данный момент элемент, щелкнув его, затем добавьте его выше или ниже prev/next, при удалении исходного элемента. Вы можете изменить вам стрелок ссылки использовать классы, как так <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(); 
});