javascript - 拖放时可见性隐藏和可见在javascript中不起作用
问题描述
我有一个代码,其中有两个带有and的box
es ,id box1
box2
box1 和 box2 可以dragged and dropped
是boxleft
,
on dropping
并且background image get deleted
唯一的name appears in box
,
我的问题是,
在将值加载到 box1 和 box2 的初始时间,我想让名称隐藏并在拖放到 boxleft 时出现
如何实现这一目标?
var array2 = [];
var items = [{
label: 'first',
url: 'https://picsum.photos/200/300?image=0'
},
{
label: 'second',
url: 'https://picsum.photos/200/300?image=4'
},
];
var tempimages = [];
array2 = items.slice();
var item;
function rvalue() {
elements = document.getElementsByClassName("box");
ptags = document.querySelectorAll('[name="values"]');
boxtags = document.getElementsByClassName("box");
for (let index = 0; index < 2; index++) {
item = array2[index];
//console.log(item);
try {
ptags[index].textContent = item.label;
ptags[index].dataset.itemLabel = item.url;
// ptags[index].style.visibility = "hidden";
boxtags[index].style.backgroundImage = 'url(' + item.url + ')';
} catch (err) {
// console.log('Exception');
}
}
}
rvalue();
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");
ev.target.appendChild(document.getElementById(data));
// ptags[index].style.visibility = "visible";
}
#box1 {
position: absolute;
top: -10.3vh;
left: -30.98vw;
cursor: pointer;
border: px solid #0066CC;
background-repeat: no-repeat;
background-size: cover;
}
#box1 p {
width: 10.0vw;
height: 10.0vh;
border-radius: 25%;
}
#box2 {
position: absolute;
top: -10.3vh;
left: -10.98vw;
cursor: pointer;
border: px solid #0066CC;
background-repeat: no-repeat;
background-size: cover;
}
#box2 p {
width: 10.0vw;
height: 10.0vh;
border-radius: 25%;
}
.boxleft {
position: absolute;
top: 48.3vh;
left: -25.98vw;
width: 14.0vw;
height: 40.0vh;
cursor: pointer;
border: 2px solid black;
}
#container {
white-space: nowrap;
border: px solid #CC0000;
}
.containerr {
border: px solid #FF3399;
}
.pic {
background-size: 100% 100%;
}
.container2 {
width: 50.1vw;
position: fixed;
top: 10.5vh;
left: 30.5vw;
}
.box p {
font-size: calc(2vw + 10px);
}
.boxleft p {
font-size: calc(4vw);
height: 4vh;
background: royalblue;
margin: 0;
color: white;
}
p {
font: "Courier New", Courier, monospace;
font-size: 5vw;
color: rgba(0, 0, 0, 0.6);
text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
color: #005ce6;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">
<div class="box" id="box1">
<p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name1"></p>
</div>
<div class="box" id="box2">
<p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name2"></p>
</div>
</div>
</div>
</div>
<div class="boxleft" ondrop="drop(event)" ondragover="allowDrop(event)" id="2"></div>
解决方案
我认为您应该拖动<div>
而不是<p>
, 并<p>
默认隐藏,因此您的代码将如下所示:
var array2 = [];
var items = [{
label: 'first',
url: 'https://picsum.photos/200/300?image=0'
},
{
label: 'second',
url: 'https://picsum.photos/200/300?image=4'
},
];
var tempimages = [];
array2 = items.slice();
var item;
function rvalue() {
elements = document.getElementsByClassName("box");
ptags = document.querySelectorAll('[name="values"]');
boxtags = document.getElementsByClassName("box");
for (let index = 0; index < 2; index++) {
item = array2[index];
//console.log(item);
try {
ptags[index].textContent = item.label;
ptags[index].dataset.itemLabel = item.url;
// ptags[index].style.visibility = "hidden";
boxtags[index].style.backgroundImage = 'url(' + item.url + ')';
} catch (err) {
// console.log('Exception');
}
}
}
rvalue();
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");
var pText = $("#" + data).children()[0].id;
$("#" + pText).removeClass("hidden");
ev.target.appendChild(document.getElementById(pText));
// ptags[index].style.visibility = "visible";
}
#box1 {
position: absolute;
top: -10.3vh;
left: -30.98vw;
cursor: pointer;
border: px solid #0066CC;
background-repeat: no-repeat;
background-size: cover;
}
#box1 p {
width: 10.0vw;
height: 10.0vh;
border-radius: 25%;
}
#box2 {
position: absolute;
top: -10.3vh;
left: -10.98vw;
cursor: pointer;
border: px solid #0066CC;
background-repeat: no-repeat;
background-size: cover;
}
#box2 p {
width: 10.0vw;
height: 10.0vh;
border-radius: 25%;
}
.boxleft {
position: absolute;
top: 48.3vh;
left: -25.98vw;
width: 14.0vw;
height: 40.0vh;
cursor: pointer;
border: 2px solid black;
}
#container {
white-space: nowrap;
border: px solid #CC0000;
}
.containerr {
border: px solid #FF3399;
}
.pic {
background-size: 100% 100%;
}
.container2 {
width: 50.1vw;
position: fixed;
top: 10.5vh;
left: 30.5vw;
}
.box p {
font-size: calc(2vw + 10px);
}
.boxleft p {
font-size: calc(4vw);
height: 4vh;
background: royalblue;
margin: 0;
color: white;
}
.hidden{
visibility: hidden;
}
p {
font: "Courier New", Courier, monospace;
font-size: 5vw;
color: rgba(0, 0, 0, 0.6);
text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
color: #005ce6;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">
<div class="box" id="box1" draggable="true" ondragstart="drag(event)">
<p name="values" id="name1" class="hidden"></p>
</div>
<div class="box" id="box2" draggable="true" ondragstart="drag(event)">
<p name="values" id="name2" class="hidden"></p>
</div>
</div>
</div>
</div>
<div class="boxleft" ondrop="drop(event)" ondragover="allowDrop(event)" id="2"></div>
推荐阅读
- c++ - std::forward_list emplace_after O(1) 怎么样?
- reactjs - 我的 useEffect() 有什么问题?它返回空对象
- amazon-web-services - AWS Step Functions 图形导出 API
- javascript - 加载 gif 然后过渡到 reactjs 上的网页
- reactjs - 为什么在部署 React 项目时终端命令 'git add .'、git commit...' 和 'git push...' 列为可选?
- c# - 学习 C#,我有一个选角问题
- python - 如何在 for 循环中制作视频捕获流以传输多个摄像机
- apache - Apache 2.4:是否可以独立于父目录身份验证对子目录进行身份验证?
- c# - AddSigningCredentials 错误指示未定义对象但堆栈跟踪中没有项目代码
- flutter - TextField 键盘上的颤振手柄返回(关闭)按钮