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



});

我的代码是：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();
});

使用Jquery上下移动附加Div标签

1 个答案: