javascript - 用纯js创建任务列表并上下移动项目

Question

我正在用纯js开发一个任务列表应用程序。我正在尝试添加一项功能来帮助用户上下移动任务。当用户单击某个按钮时，他们应该能够将特定任务向上或向下移动一级。我可以用 jquery 做到这一点，但不知道如何用纯 js 做到这一点。这是DEMO

有人可以帮助我吗？我如何提高代码的质量

HTML

<div class="task-list-app">

        <header class="main-header">
            <h1>Tasks list <span class="version"></span></h1>

        </header>

        <section class="main-section">

            <div>
                <input type="text"  id="add-new-task" name="add-new-task" placeholder="Type task name and hit Enter ">
            </div>

           <ul id="tasks-list"></ul>

        </section>

        <div class="status-bar">
            <span class="app-status"></span>
        </div>
    </div>

JS

function TaskList() {
    "use strict";
    var appVersion = '1.0.0v';

    function setAppStatus($status) {

        var $appStatusElm = document.querySelector(".app-status");

        $appStatusElm.textContent = $status;        


    }

    function addTask() {

        var $addNewTask = document.querySelector("#add-new-task");

        $addNewTask.addEventListener("keypress", function (e) {



            if (e.which == 13) {
                var taskName = this.value;

                appendNewTask(taskName);

                this.value = '';
            }

            return false;

        });


    }

    function appendNewTask (taskName) {

        var $taskList = document.querySelector("#tasks-list");
        var $taskElm = document.createElement("li");
        var $btnsWrapper = document.createElement("div");
        var $deleteBtn = document.createElement('a');        
        var $moveUpBtn = document.createElement('a');       
        var $moveDownBtn = document.createElement('a');
        var $taskNameElm = document.createElement('span');
        var hrefAttr = document.createAttribute("href");
        var buttons = [];

        hrefAttr.nodeValue ="#";

        $taskElm.appendChild($taskNameElm);        
        $taskNameElm.textContent = taskName;        
        $taskList.appendChild($taskElm);
        $taskElm.appendChild($btnsWrapper);

        setTimeout(function () {
            $taskElm.classList.add("remove-border");
        }, 300);


        $deleteBtn.textContent = "Delete";        
        var $deleteBtnHref = hrefAttr.cloneNode(true);
        $deleteBtn.setAttributeNode($deleteBtnHref);



        $moveUpBtn.textContent = "Move up";  
        var $moveUpBtnHref = hrefAttr.cloneNode(true);
        $moveUpBtn.setAttributeNode($moveUpBtnHref);

        $moveDownBtn.textContent = "Move down";  
        var $moveDownBtnHref = hrefAttr.cloneNode(true);
        $moveDownBtn.setAttributeNode($moveDownBtnHref);

        buttons = [$deleteBtn, $moveDownBtn, $moveUpBtn];

        buttons.forEach(function (btn) {
            $taskElm.querySelector('div').appendChild(btn);
        });

        $deleteBtn.addEventListener('click', function (e) {
            e.path[3].removeChild(e.path[2]);
            setAppStatus("Task " + taskName + " has been removed");
        })

        setAppStatus("Task " + taskName + " has been recorded");

    }

    this.start = function () {
        var $versionElm = document.querySelector(".main-header  .version");


        $versionElm.textContent = appVersion;

        addTask();

        setAppStatus("Ready To Use");

    };
}


var app = new TaskList();
app.start();

Answer 1

以下是当他们选择向上移动时您希望如何交换整个 li。 (要实现向下移动，您只需执行 nextSibiling 而不是 previousSibiling)；

Here is a working JSFiddle with the code below

$moveUpBtn.addEventListener('click',function(e){
        var $mvTaskList = e.target.closest('ul');
        var $mvTask = e.target.closest('li');
        var $prevTask = e.target.closest('li').previousSibling;
        if(typeof($prevTask)!=='undefined' && $prevTask!==null){
          $mvTaskList.insertBefore($mvTask, $prevTask);
        }
    });

至于改进您的代码 - 考虑根据正在发生的情况对代码进行分组，以便对 mvUpBtn 的所有声明进行分组，而不是分散在整个代码库中。另一种方法是限制 createElement 操作，直到创建了整个按钮 - 尽管在此示例中没有理由放弃该节点，但在其他情况下，可能会根据某些条件创建节点并失败(放弃节点)在条件失败后。附加到对象的开销比创建完整 DOM 节点要少得多。

var mvUpBtn = 'a';
mvUpBtn.textContent = 'Move Up';
mvUpBtn.setAttributeNode(hrefAttr.cloneNode(true));
var $mvUpBtn = document.createElement(mvUpBtn);