<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Notes App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button onclick="clearAll();">Clear Note</button>
<h1 class="main-title">Sticky Notes App</h1>
<div class="drag-container">
<ul class="drag-list">
<!-- Backlog Column -->
<li class="drag-column backlog-column">
<span class="header">
<h1>Backlog</h1>
</span>
<!-- Backlog Content -->
<div id="backlog-content" class="custom-scroll">
<ul class="drag-item-list" id="backlog-list" ondrop="drop(event)" ondragover="allowDrop(event)"
ondragenter="dragEnter(0)">
</ul>
</div>
<!-- Add Button Group -->
<div class="add-btn-group" onclick="showInputBox(0)">
<div class="add-btn">
<span class="plus-sign">
+
</span>
<span>Add Item</span>
</div>
<div class="add-btn solid" onclick="hideInputBox(0)">
<span>Save Item</span>
</div>
</div>
<div class="add-container">
<div class="add-item" contenteditable="true">
</div>
</div>
</li>
<!-- Progress Column -->
<li class="drag-column progress-column">
<span class="header">
<h1>Progress</h1>
</span>
<!-- Progress Content -->
<div id="progress-content" class="custom-scroll">
<ul class="drag-item-list" id="progress-list" ondrop="drop(event)" ondragover="allowDrop(event)"
ondragenter="dragEnter(1)">
</ul>
</div>
<!-- Add Button Group -->
<div class="add-btn-group" onclick="showInputBox(1)">
<div class="add-btn">
<span class="plus-sign">
+
</span>
<span>Add Item</span>
</div>
<div class="add-btn solid" onclick="hideInputBox(1)">
<span>Save Item</span>
</div>
</div>
<div class="add-container">
<div class="add-item" contenteditable="true">
</div>
</div>
</li>
<!-- Complete Column -->
<li class="drag-column complete-column">
<span class="header">
<h1>Complete</h1>
</span>
<!-- Complete Content -->
<div id="complete-content" class="custom-scroll">
<ul class="drag-item-list" id="complete-list" ondrop="drop(event)" ondragover="allowDrop(event)"
ondragenter="dragEnter(2)">
</ul>
</div>
<!-- Add Button Group -->
<div class="add-btn-group" onclick="showInputBox(2)">
<div class="add-btn">
<span class="plus-sign">
+
</span>
<span>Add Item</span>
</div>
<div class="add-btn solid" onclick="hideInputBox(2)">
<span>Save Item</span>
</div>
</div>
<div class="add-container">
<div class="add-item" contenteditable="true">
</div>
</div>
</li>
<!-- On Hold Column -->
<li class="drag-column on-hold-column">
<span class="header">
<h1>On Hold</h1>
</span>
<!-- On Hold Content -->
<div id="on-hold-content" class="custom-scroll">
<ul class="drag-item-list" id="on-hold-list" ondrop="drop(event)" ondragover="allowDrop(event)"
ondragenter="dragEnter(3)">
</ul>
</div>
<!-- Add Button Group -->
<div class="add-btn-group" onclick="showInputBox(3)">
<div class="add-btn">
<span class="plus-sign">
+
</span>
<span>Add Item</span>
</div>
<div class="add-btn solid" onclick="hideInputBox(3)">
<span>Save Item</span>
</div>
</div>
<div class="add-container">
<div class="add-item" contenteditable="true">
</div>
</div>
</li>
</ul>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
VanillaJS 中使用拖放的便笺源代码
版权申诉
157 浏览量
2024-02-29
21:40:47
上传
评论
收藏 211KB ZIP 举报
sticky-note-using-drag-and-drop-in-vanillajs.zip （4个子文件） 
Sticky Note using Drag and Drop in VanillaJS 
style.css 4KB
trees.jpg 206KB
index.html 5KB script.js 6KB资源评论
新华
- 粉丝: 8536
- 资源: 609
