4

JS todo 待办事项小demo

 3 years ago
source link: https://yazhen.me/_posts/2021/JS%E6%8B%96%E6%8B%BD-todo%E5%B0%8F%E4%BE%8B%E5%AD%90/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
JS todo 待办事项小demo

完整代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .wrapper {display: flex;padding: 10px;}
    .col {border: 1px solid #ddd;height: 500px;width: 200px;background:#eee;margin: 0 10px;}
      .col-header{
        padding: 10px;
        background: #1DA921;
        color: #fff;
        text-align: center;
      }
    .item {border: 1px solid #1da921;margin: 8px 15px;border-radius: 10px}
      
      .item-header{padding: 3px 5px;color: #9e9e9e;font-size: 13px}
      .item-header-point{float: right;background: #ccc;padding: 0 4px;border-radius: 50%}
      .item-main{height: 35px; padding: 5px;color: #424242 }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="col1 col">
          <header class="col-header">
              待处理
            </header>
          <div class="item" id="item1" draggable="true">
              <header class="item-header">
                <span class="item-header-username">橘子🍊</span>
                <span class="item-header-point">10</span>
              </header>
              <main class="item-main">
                橘右京
              </main>
          </div>
          <div class="item" id="item2" draggable="true">
              <header class="item-header">
                <span class="item-header-username">韩信</span>
                <span class="item-header-point">12</span>
              </header>
              <main class="item-main">
                三连跳
              </main>
          </div>
          <div class="item" id="item3" draggable="true">
              <header class="item-header">
                <span class="item-header-username">不知火舞</span>
                <span class="item-header-point">2</span>
              </header>
              <main class="item-main">
                不知取向
              </main>
          </div>
           
        </div>
        <div class="col2 col">
          <header class="col-header">
              进行中
            </header>
        </div>
        <div class="col3 col">
          <header class="col-header">
              已完成
            </header>
        </div>
        
    </div>
    <script>
        let cols = document.getElementsByClassName('col');
        for (let col of cols) {
            col.ondragenter = e => { 
                console.log('放置元素 ondragenter', '<' + e.dataTransfer.getData('item') + '>'); 
                this.classList.toggle('active')
            }
            col.ondragover = e => {
                e.preventDefault();
                console.log('放置元素 ondragover', '<' + e.dataTransfer.getData('item') + '>');
            }
            col.ondragleave = e => { 
                console.log('放置元素 ondragleave', '<' + e.dataTransfer.getData('item') + '>'); 
            }
            col.ondrop = function(e) {
                console.log('放置元素 ondrop', '<' + e.dataTransfer.getData('item') + '>');
                this.append(document.getElementById(e.dataTransfer.getData('item')));
            }
        }
        let items = document.getElementsByClassName('item');
        for (let item of items) {
            item.ondragstart = e => {
                console.log('拖拽元素 ondragstart');
                e.dataTransfer.setData('item', e.target.id);
            }
            item.ondragend = e => {
              console.log('拖拽元素 ondragend');
            }
        }
    </script>
</body>
</html>

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK