JS拖拽元素的问题
[英]Problem with dragging and dropping elements in JS
问题描述
我试图对通过单击按钮创建的元素进行一些拖放操作。
我已经阅读了很多帖子并观看了几个视频，但我真的找不到解决方案。
我知道我在循环创建的元素时遇到了问题。 这就是为什么我将它打包在自己的函数中，以便它在创建后运行。
我也认为我试图附加的类型在这里是错误的。 这就是为什么我做了一个小函数来查看类型。
我应该提一下，我是 JS 的新手，只是想建立一些来学习。 我希望你们可以通过发布解决方案或给我一些提示来提供帮助。 我可能错过了一些理论，因为我是随手教的。
这是我的代码。
它没有使 100 移动友好！ 寻找一个带有 + 的大圆形绿色按钮，用于向代码段中的行添加元素！ :-)
const btn = document.querySelector('#btn'); const workRow = document.querySelector('.workrow'); const workRows = document.querySelectorAll('.workrow'); const workTasks = document.querySelectorAll('.workrowtask'); const typeOf = () => { console.log(typeof workTasks) }; btn.addEventListener('click', () => { makePost(); loopTasks(); typeOf(); }); document.addEventListener('click', delPost); function makePost() { const div = document.createElement('div'); const textnode = document.createTextNode('Hello World'); div.appendChild(textnode); div.setAttribute('draggable', true); div.className = ('workrowtask'); const delbtn = document.createElement('button'); const textnodebtn = document.createTextNode('-'); delbtn.appendChild(textnodebtn); delbtn.className = ('worktaskdelbtn'); div.appendChild(delbtn); workRow.appendChild(div); }; function delPost(e) { if(e.target && e.target.className === 'worktaskdelbtn') { e.target.parentNode.remove(); }; }; function loopTasks() { for (let t = 0; t < workTasks.length; t++) { const task = workTasks[t] task.addEventListener('dragstart', (e) => { e.preventDefault(); console.log('dragstart') }); task.addEventListener('dragend', (e) => { e.preventDefault() console.log('dragend') }); }}; for (let r = 0; r < workRows.length; r++) { const rows = workRows[r] rows.addEventListener('dragover', (e) => { e.preventDefault(); console.log('dragover'); }); rows.addEventListener('dragenter', (e) => { e.preventDefault(); console.log('dragenter'); }); rows.addEventListener('drop', (e) => { e.preventDefault(); console.log('drop'); rows.appendChild(workTasks) }); };
* { padding: 0; margin: 0; box-sizing: border-box; } body { background-color: #393939; } .header { background-color: #00D189; text-transform: uppercase; color: white; text-align: center; width: 100%; padding: 20px 0px; } .worksection { width: 100%; margin-top: 50px; display: flex; justify-content: space-evenly; } .workrow { width: 300px; background-color:white; height: 600px; border-radius: 30px 30px 0px 0px; overflow: scroll; } .workheader { width: 300px; padding: 20px 0px; border-radius: 30px 30px 0px 0px; background-color: #00D189; color: white; text-align: center; } .buttonwrapper { display: flex; justify-content: flex-end; } .buttonwrapper button { border-radius: 50%; background-color: #00D189; height: 50px; width: 50px; border: none; color: white; font-size: 30px; margin: 30px 15px 0px 0px; cursor: pointer; outline: none; } .workrowtask { width: 100%; background-color: gray; padding: 10px 0px; margin-top: 10px; display: flex; flex-wrap: nowrap; justify-content: space-around; } .worktaskdelbtn { background-color: red; color: white; height: 15px; width: 15px; border-radius: 50%; border: none; cursor: pointer; outline: none; } @media only screen and (max-width: 1214px) { .worksection { flex-flow: column; align-items: center; } .workrow { margin-bottom: 50px; } .worksection { position: relative; } .buttonwrapper { position: absolute; left: 30px; bottom: 300px; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Drag&droptodo</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <header class="header"> <h1>The Drag&Drop2Do</h1> </header> <section class="worksection"> <div class="workrow"> <div class="workheader"> <p>Dagens opgaver</p> </div> </div> <div class="workrow"> <div class="workheader"> <p>Færdige opgaver</p> </div> </div> <div class="workrow"> <div class="workheader"> <p>Udskudte opgaver</p> </div> </div> <div class="workrow"> <div class="workheader"> <p>Afsluttet opgaver</p> </div> </div> </section> <div class="buttonwrapper"> <button id="btn">+</button> </div> <script src="./javascript/script.js"></script> </body> </html>
3 个解决方案
解决方案1
0 2020-08-23 21:52:55
尝试这个：
function allowDrop(allowDropEvent) { allowDropEvent.target.style.color = 'blue'; allowDropEvent.preventDefault(); } function drag(dragEvent) { dragEvent.dataTransfer.setData('text', dragEvent.target.id); dragEvent.target.style.color = 'green'; } function drop(dropEvent) { dropEvent.preventDefault(); var data = dropEvent.dataTransfer.getData('text'); dropEvent.target.appendChild(document.getElementById(data)); document.getElementById('drag').style.color = 'black'; }
.container { display: grid; width: 200px; height: 100px; } #div1 { grid-row: 1; grid-column: 1; border: 1px solid #aaa; width: 100px; height: 100px; padding: 10px; } #div2 { grid-row: 1; grid-column: 2; border: 1px solid #aaa; width: 100px; height: 100px; padding: 10px; }
<div class="container"> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <span id="drag" draggable="true" ondragstart="drag(event)">Drag me to the other box</span> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </div>
使用 HTML 拖放 API 的简单示例。
您还可以查看 MDN 网络文档以了解：
如果这没有帮助，请告诉我。
解决方案2
0 2020-08-23 22:00:33
我已从您的 JavaScript 代码中删除了不必要的部分。 还更改了 CSS 和 HTML，只是为了简化答案。
注意：我删除了overflow:scroll ，因为它在您的示例中看起来很奇怪。
这是工作示例：
const btn = document.querySelector('#btn'); const workRow = document.querySelector('.workrow'); const workRows = document.querySelectorAll('.workrow'); let counter = 0; btn.addEventListener('click', () => { makePost(); }); function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); if (ev.target.className == 'workrow') { ev.target.appendChild(document.getElementById(data)); } } function makePost() { const div = document.createElement('div'); const textnode = document.createTextNode('Hello World ' + counter); div.id = 'helloWorld' + counter; counter++; div.appendChild(textnode); div.setAttribute('draggable', true); div.className = 'workrowtask'; const delbtn = document.createElement('button'); const textnodebtn = document.createTextNode('-'); delbtn.appendChild(textnodebtn); delbtn.className = 'worktaskdelbtn'; div.appendChild(delbtn); delbtn.addEventListener('click', delPost); div.addEventListener('dragstart', drag); workRow.appendChild(div); } function delPost(e) { if (e.target && e.target.className === 'worktaskdelbtn') { e.target.parentNode.remove(); } } for (let r = 0; r < workRows.length; r++) { const row = workRows[r] row.addEventListener('dragover', allowDrop); row.addEventListener('dragenter', allowDrop); row.addEventListener('drop', drop); }
* { padding: 0; margin: 0; box-sizing: border-box; } body { background-color: #393939; } .header { background-color: #00D189; text-transform: uppercase; color: white; text-align: center; width: 100%; padding: 20px 0px; display: none; /*!!!*/ } .worksection { width: 100%; /*margin-top: 50px;*/ display: flex; justify-content: space-evenly; } .workrow { width: 200px; background-color: white; height: 300px; border-radius: 30px 30px 0px 0px; overflow: hidden; } .workheader { width: 200px; padding: 20px 0px; border-radius: 30px 30px 0px 0px; background-color: #00D189; color: white; text-align: center; } .buttonwrapper { display: flex; justify-content: flex-end; } .buttonwrapper button { border-radius: 50%; background-color: #00D189; height: 50px; width: 50px; border: none; color: white; font-size: 30px; /*margin: 30px 15px 0px 0px;*/ cursor: pointer; outline: none; } .workrowtask { width: 100%; background-color: gray; padding: 10px 0px; margin-top: 10px; display: flex; flex-wrap: nowrap; justify-content: space-around; } .worktaskdelbtn { background-color: red; color: white; height: 15px; width: 15px; border-radius: 50%; border: none; cursor: pointer; outline: none; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Drag&droptodo</title> </head> <body> <header class="header"> <h1>The Drag&Drop2Do</h1> </header> <section class="worksection"> <div class="workrow"> <div class="workheader"> <p>Dagens opgaver</p> </div> </div> <div class="workrow"> <div class="workheader"> <p>Færdige opgaver</p> </div> </div> <div class="workrow"> <div class="workheader"> <p>Udskudte opgaver</p> </div> </div> </section> <div class="buttonwrapper"> <button id="btn">+</button> </div> </body> </html>
解决方案3
0 已采纳 2020-08-23 22:03:06
你的问题是这样的：
rows.addEventListener('drop', (e) => {
................
rows.appendChild(workTasks)
});
工作任务为空。
在dragenter事件中，您可以为元素设置一个属性并在放置中使用它：
rows.addEventListener('drop', function (e) {
e.preventDefault();
var currTarsk = document.querySelector('.workrowtask[isdragging="true"]');
currTarsk.removeAttribute('isdragging')
rows.appendChild(currTarsk);
});
片段：
* { padding: 0; margin: 0; box-sizing: border-box; } body { background-color: #393939; } .header { background-color: #00D189; text-transform: uppercase; color: white; text-align: center; width: 100%; padding: 20px 0px; } .worksection { width: 100%; margin-top: 50px; display: flex; justify-content: space-evenly; } .workrow { width: 300px; background-color: white; height: 600px; border-radius: 30px 30px 0px 0px; overflow: scroll; } .workheader { width: 300px; padding: 20px 0px; border-radius: 30px 30px 0px 0px; background-color: #00D189; color: white; text-align: center; } .buttonwrapper { display: flex; justify-content: flex-end; } .buttonwrapper button { border-radius: 50%; background-color: #00D189; height: 50px; width: 50px; border: none; color: white; font-size: 30px; margin: 30px 15px 0px 0px; cursor: pointer; outline: none; } .workrowtask { width: 100%; background-color: gray; padding: 10px 0px; margin-top: 10px; display: flex; flex-wrap: nowrap; justify-content: space-around; } .worktaskdelbtn { background-color: red; color: white; height: 15px; width: 15px; border-radius: 50%; border: none; cursor: pointer; outline: none; } @media only screen and (max-width: 1214px) { .worksection { flex-flow: column; align-items: center; } .workrow { margin-bottom: 50px; } .worksection { position: relative; } .buttonwrapper { position: absolute; left: 30px; bottom: 300px; } }
<header class="header"> <h1>The Drag&Drop2Do</h1> </header> <section class="worksection"> <div class="workrow"> <div class="workheader"> <p>Dagens opgaver</p> </div> </div> <div class="workrow"> <div class="workheader"> <p>Færdige opgaver</p> </div> </div> <div class="workrow"> <div class="workheader"> <p>Udskudte opgaver</p> </div> </div> <div class="workrow"> <div class="workheader"> <p>Afsluttet opgaver</p> </div> </div> </section> <div class="buttonwrapper"> <button id="btn">+</button> </div> <script> const btn = document.querySelector('#btn'); const workRow = document.querySelector('.workrow'); const workRows = document.querySelectorAll('.workrow'); const workTasks = document.querySelectorAll('.workrowtask'); const typeOf = function () { console.log(typeof workTasks) }; btn.addEventListener('click', function () { makePost(); loopTasks(); //typeOf(); }); document.addEventListener('click', delPost); function makePost() { const div = document.createElement('div'); const textnode = document.createTextNode('Hello World'); div.appendChild(textnode); div.setAttribute('draggable', true); div.className = ('workrowtask'); const delbtn = document.createElement('button'); const textnodebtn = document.createTextNode('-'); delbtn.appendChild(textnodebtn); delbtn.className = ('worktaskdelbtn'); div.appendChild(delbtn); workRow.appendChild(div); }; function delPost(e) { if (e.target && e.target.className === 'worktaskdelbtn') { e.target.parentNode.remove(); }; }; function loopTasks() { for (let t = 0; t < workTasks.length; t++) { const task = workTasks[t] task.addEventListener('dragstart', function (e) { e.preventDefault(); }); task.addEventListener('dragend', function (e) { e.preventDefault() }); } }; for (let r = 0; r < workRows.length; r++) { const rows = workRows[r] rows.addEventListener('dragover', function (e) { e.preventDefault(); }); rows.addEventListener('dragenter', function (e) { e.preventDefault(); e.target.setAttribute('isdragging', true); }); rows.addEventListener('drop', function (e) { e.preventDefault(); var currTarsk = document.querySelector('.workrowtask[isdragging="true"]'); currTarsk.removeAttribute('isdragging') rows.appendChild(currTarsk); }); }; </script>
HTML5在多个浏览器窗口之间拖放多个元素
[英]HTML5 Dragging and Dropping multiple elements between multiple browser windows
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.