javascript - 使用 Dragula 时拖动元素时出现问题
问题描述
我还在做一个即将到期的学校项目,自从我上一个问题以来,我已经把事情做好了。我去了 Dragula 图书馆,这很好。如果您测试我的代码,您会发现,当您在 chils 按钮周围拖动六边形时,文本字段在拖动时落在六边形之外,并在我放下六边形时再次进入正确位置。如何避免元素在拖动时从六边形中掉出来?
这是您可以克隆和测试的 gitHub 的链接:
https://github.com/Martinius222/ProsjektMaster
这是一个正在进行的项目,因此项目中有不同的文件,但相关文件是要测试的 index.html style.css dragula.js(库)。
我试图摆弄六边形和子按钮的 HTML 和 CSS,但没有运气。我怀疑 JavaScript 有问题。
有很多代码,但我已经发布了整个项目的 gitHub 链接。下面是 HTML 和 CSS:
<!DOCTYPE html>
<html>
<head>
<title>IdeaComb</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="dragula.css">
</head>
<body>
<script type="text/javascript" src="dragula.js"></script>
<nav></nav>
<div id="sidebar">
<div id="options"></div>
<div id="listField"></div>
<div id="generator">
<div id="generatorOptions">
<button id="newCombBtn">+</button>
</div>
<div id="generatorField">
</div>
</div>
</div>
<div id="workspace">
<div class="rows" id="row1">
<div id="1x1" class="cont"></div>
<div id="1x2" class="cont"></div>
<div id="1x3" class="cont"></div>
<div id="1x4" class="cont"></div>
<div id="1x5" class="cont"></div>
<div id="1x6" class="cont"></div>
<div id="1x7" class="cont"></div>
<div id="1x8" class="cont"></div>
</div>
<div class="rows" id="row2">
<div id="2x1" class="cont"></div>
<div id="2x2" class="cont"></div>
<div id="2x3" class="cont"></div>
<div id="2x4" class="cont"></div>
<div id="2x5" class="cont"></div>
<div id="2x6" class="cont"></div>
<div id="2x7" class="cont"></div>
<div id="2x8" class="cont"></div>
</div>
<div class="rows" id="row3">
<div id="3x1" class="cont"></div>
<div id="3x2" class="cont"></div>
<div id="3x3" class="cont">
<div class="hexagon">
<div id="likebtn">+</div>
<div id="deletebtn">x</div>
<input type="" name="" placeholder="Test">
</div>
</div>
<div id="3x4" class="cont"></div>
<div id="3x5" class="cont"></div>
<div id="3x6" class="cont"></div>
<div id="3x7" class="cont"></div>
<div id="3x8" class="cont"></div>
</div>
<div class="rows" id="row4">
<div id="4x1" class="cont"></div>
<div id="4x2" class="cont"></div>
<div id="4x3" class="cont"></div>
<div id="4x4" class="cont"></div>
<div id="4x5" class="cont"></div>
<div id="4x6" class="cont"></div>
<div id="4x7" class="cont"></div>
<div id="4x8" class="cont"></div>
</div>
<div class="rows" id="row5">
<div id="5x1" class="cont"></div>
<div id="5x2" class="cont"></div>
<div id="5x3" class="cont"></div>
<div id="5x4" class="cont"></div>
<div id="5x5" class="cont"></div>
<div id="5x6" class="cont"></div>
<div id="5x7" class="cont"></div>
<div id="5x8" class="cont"></div>
</div>
<div class="rows" id="row6">
<div id="6x1" class="cont"></div>
<div id="6x2" class="cont"></div>
<div id="6x3" class="cont"></div>
<div id="6x4" class="cont"></div>
<div id="6x5" class="cont"></div>
<div id="6x6" class="cont"></div>
<div id="6x7" class="cont"></div>
<div id="6x8" class="cont"></div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
<script>
dragula([document.getElementById("generatorField"), document.getElementById("1x1"), document.getElementById("1x2"), document.getElementById("1x3"), document.getElementById("1x4"), document.getElementById("1x5"),document.getElementById("1x6"), document.getElementById("1x7"), document.getElementById("1x8"), document.getElementById("2x1"), document.getElementById("2x2"), document.getElementById("2x3"), document.getElementById("2x4"), document.getElementById("2x5"), document.getElementById("2x6"), document.getElementById("2x7"), document.getElementById("2x8"), document.getElementById("3x1"), document.getElementById("3x2"), document.getElementById("3x3"), document.getElementById("3x4"), document.getElementById("3x5"), document.getElementById("3x6"), document.getElementById("3x7"), document.getElementById("3x8"), document.getElementById("4x1"), document.getElementById("4x2"), document.getElementById("4x3"), document.getElementById("4x4"), document.getElementById("4x5"), document.getElementById("4x6"), document.getElementById("4x7"), document.getElementById("4x8"), document.getElementById("5x1"), document.getElementById("5x2"), document.getElementById("5x3"), document.getElementById("5x4"), document.getElementById("5x5"), document.getElementById("5x6"), document.getElementById("5x7"), document.getElementById("5x8"), document.getElementById("6x1"), document.getElementById("6x2"), document.getElementById("6x3"), document.getElementById("6x4"), document.getElementById("6x5"), document.getElementById("6x6"), document.getElementById("6x7"), document.getElementById("6x8")], {
revertOnSpill: true
})
</script>
</body>
</html>
body {
margin: 0;
}
nav {
width: 100%;
height: 3.5em;
background-color: #ebc645;
border-bottom: solid 3px #463e20;
}
#options {
display: block;
width: 95%;
height: 4em;
border-radius: 8px;
margin: 1em auto 0 auto;
background-color: #ffffff;
}
#listField {
display: block;
width: 95%;
height: 30em;
border-radius: 8px;
margin: 1em auto 0 auto;
background-color: #ffffff;
}
#generator {
display: flex;
justify-content: center;
width: 95%;
height: 12em;
border-radius: 8px;
margin: 1em auto 0 auto;
background-color: #ffffff;
z-index: 9;
}
#generatorOptions {
display: flex;
justify-content: center;
width: 17%;
height: 100%;
}
#generatorField {
display: flex;
justify-content: center;
align-items: center;
width: 83%;
height: 100%;
}
#newCombBtn {
margin-top: .5em;
display: inline-block;
position: static;
top: -5em;
left: -8em;
width: 35px;
height: 37px;
border-radius: 50%;
background-color: #ebc645;
z-index: 10;
}
#sidebar {
float: right;
width: 17%;
height: 50em;
margin: 1em 4px 0 0;
display: inline-block;
background-color: #ebc645;
border-radius: 8px;
border-bottom: solid 3px #463e20;
}
#workspace {
display: inline-block;
width: 82%;
height: 30em;
margin: 0;
float: left;
}
#row2 {
position: relative;
top: -3.8em;
left: 4.3em;
}
#row3 {
position: relative;
top: -7.6em;
}
#row4 {
position: relative;
top: -11.4em;
left: 4.3em;
}
#row5 {
position: relative;
top: -15.2em;
}
#row6 {
position: relative;
top: -19em;
left: 4.3em;
}
.cont {
position: relative;
top: 2em;
display: inline-block;
width:11%;
height: 11em;
/*background-color: black;*/
background-color: rgba(red, green, blue, alpha);
opacity: 1;
border-radius: 8px;
/*opacity: 0.5;*/
}
/*.cont > .box {
position: inherit;
width: 100%;
height: 30px;
background-color: blue;
border-radius: 8px;
border: solid 2px lightblue;
transition: opacity 0.2s ease-in-out;
cursor: grab;
}*/
/*.hexagon {
position: relative;
width: 133.77px;
height: 77.23px;
background-color: #64C7CC;
margin: 38.62px 0;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 66.885px solid transparent;
border-right: 66.885px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 38.62px solid #64C7CC;
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 38.62px solid #64C7CC;
}*/
.cont > .hexagon {
position: relative;
width: 133.77px;
height: 77.23px;
background-color: #ebc645;
margin: 38.62px 0;
cursor: grab;
z-index: 10;
}
.cont > .hexagon:before,
.cont > .hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 66.885px solid transparent;
border-right: 66.885px solid transparent;
cursor: grab;
z-index: 10;
}
.cont > .hexagon:before {
bottom: 100%;
border-bottom: 38.62px solid #ebc645;
cursor: grab;
z-index: 10;
}
.cont > .hexagon:after {
top: 100%;
width: 0;
border-top: 38.62px solid #ebc645;
cursor: grab;
z-index: 10;
}
.cont > .hexagon > #likebtn {
border-radius: 50%;
left: 7em;
display: inline-block;
position: relative;
width: 2em;
height: 2em;
}
.cont > .hexagon > #deletebtn {
border-radius: 50%;
left: 1em;
display: inline-block;
position: relative;
width: 2em;
height: 2em;
}
/*Styling for generated hexagon inside generator div*/
#generatorField > .hexagon {
position: relative;
width: 150px;
height: 86.60px;
background-color: #ebc645;
margin: 43.30px 0;
cursor: grab;
z-index: 10;
}
#generatorField > .hexagon:before,
#generatorField > .hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
cursor: grab;
z-index: 10;
}
#generatorField > .hexagon:before {
bottom: 100%;
border-bottom: 43.30px solid #ebc645;
cursor: grab;
z-index: 10;
}
#generatorField > .hexagon:after {
top: 100%;
width: 0;
border-top: 43.30px solid #ebc645;
cursor: grab;
z-index: 10;
}
//Javascript for "New Comb" generator in the bottom left
document.getElementById("newCombBtn").addEventListener("click", function() {
var btn = document.createElement("div");
btn.classList.add("hexagon");
document.getElementById("generatorField").appendChild(btn);
});
同样,这可能是 Dragula 库的问题。但是六边形div的子元素在拖动时会从六边形中掉出来
解决方案
推荐阅读
- javascript - “保存到驱动器”按钮可以/需要手动清理吗?
- c++ - Xcode 构建第二次失败,出现“循环内部”错误,抱怨 GLFW 库
- sql-server - ASP Classic SQL 连接字符串一夜之间退出!必须用完全不同的东西代替,发生了什么?
- networking - 如何使用 Wireshark 调查哪些应用程序正在发送/接收哪些数据包?
- php - 如何使用“在 laravel 刀片中执行 while 循环”文件
- ios - Firebase DynamicLinks handleUniversalLink 始终返回 false
- javascript - R Shiny – 使用 CSS 滚动时让 wellPanel 弹出窗口跟随
- macos - Catalyst - 如何为电子邮件设置 BccRecipients?
- cookies - MalformedCookieException:无效的“过期”属性
- php - Symfony 仅在 Amazon Web Service 中无法找到模板“”错误