使用jquery向上和向下移动附加div标记

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; 
     } 
    }); 



}); 

我的codepen是：http://codepen.io/louis345/pen/dOqdQW。

任何帮助将不胜感激。希望我的问题很明确。

Answer 1

首先，你不应该为多个元素使用ID，而应该使用类（谈论#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(); 
});