vue实现一个增加删除拖动排序的待办事项效果代码-html代码-BFW代码库

vue实现一个增加删除拖动排序的待办事项效果代码

代码语言：html

所属分类：其他

代码描述：vue实现一个增加删除拖动排序的待办事项效果代码，可拖动排序、拖动删除、标记完成。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        body {
          font-family: "Source Sans Pro", "Arial", sans-serif;
        }
        
        * {
          box-sizing: border-box;
        }
        
        .todo-list {
          list-style-type: none;
          padding: 10px;
        }
        
        .done {
          text-decoration: line-through;
          color: #888;
        }
        
        .new-todo {
          width: 100%;
        }
        
        .trash-drop {
          border: 2px dashed #ccc !important;
          text-align: center;
          color: #e33;
        }
        
        .trash-drop:-moz-drag-over {
          border: 2px solid red;
        }
        
        .todo-item {
          border: 1px solid #ccc;
          border-radius: 2px;
          padding: 14px 8px;
          margin-bottom: 3px;
          background-color: #fff;
          box-shadow: 1px 2px 2px #ccc;
          font-size: 22px;
        }
        
        .remove-item {
          float: right;
          color: #a45;
          opacity: 0.5;
        }
        
        .todo-item:hover .remove-item {
          opacity: 1;
          font-size: 28px;
        }
    </style>


</head>

<body>
    <div id='app'>
        <ul class="todo-list">
            <li @dragover.prevent @drop="dragFinish(-1, $event)" v-if="dragging > -1" class="trash-drop todo-item" v-bind:class="{drag: isDragging}">Delete</li>

            <li v-else>
                <input placeholder="Type new task and press enter" type="text" class="new-todo todo-item" v-model="newItem" @keyup.enter="addItem">
            </li>

            <li class="todo-item" v-for="(item, i) in todos" v-key="i" draggable="true" @dragstart="dragStart(i, $event)" @dragover.prevent @dragenter="dragEnter" @dragleave="dragLeave" @dragend="dragEnd" @drop="dragFinish(i, $event)">
                <input type="checkbox" v-model="item.done" />
                <span :class="{done: item.done}">{{ item.title }}</span>
                <span class="remove-item" @click="removeItem(item)">x</span>
            </li>
        </ul>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
.........完整代码请登录后点击上方下载按钮下载查看