- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
在我的代码中,
我在 class
box
中有 four images
id
box1
, box2
、box3
和 box4
..
每张图片
都可以拖放
到下面的矩形
..
我的问题是当我尝试定位
它在dropped area
using nth child
in css
它不工作
我无法弄清楚 css 中的错误在哪里?
如何使用第 n 个 child 将图像定位在拖放区域上......?如何解决?
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");
console.log(data);
$("#" + data).css("position", "unset");
ev.target.appendChild(document.getElementById(data));
}
body{
background-repeat: no-repeat;
background-size: cover;
width:100%;
height:100%;
overflow: hidden;
background-size: 100vw 100vh;
}
#box1 {
position: absolute;
top: 28.3vh;
left: -10.98vw;
cursor: pointer;
border: 1px solid #0066CC;
background-repeat: no-repeat;
background-size: contain;
}
#box1 p {
width: 10.0vw;
height: 10.0vh;
border-radius: 25%;
}
#box2 {
position: absolute;
top: 13.7vh;
left: -10.98vw;
cursor:pointer;
border:1px solid #0066CC;
background-repeat:no-repeat;
background-size: contain;
}
#box2 p {
width: 5.0vw;
height: 5.0vh;
border-radius: 25%;
}
#box3 {
position: absolute;
top: 7.7vh;
left: 43.98vw;
cursor:pointer;
border:1px solid #0066CC;
background-size: contain;
background-repeat:no-repeat
}
#box3 p {
width: 7.0vw;
height: 7.0vh;
border-radius: 25%;
}
#box4 {
position: absolute;
top: 28.3vh;
left: 40.98vw;
cursor:pointer;
border:1px solid #0066CC;
background-repeat:no-repeat;
background-size:cover;
background-size: contain;
}
#box4 p {
width: 10.0vw;
height: 10.0vh;
border-radius: 25%;
}
.container2 {
width: 50.1vw;
position: fixed;
top: 10.5vh;
left: 30.5vw;
}
.boxright1 p {
font-size: calc(2vw);
height: 4vh;
margin: 0;
color: white;
background-size: cover;
background-repeat:no-repeat;
color: #0066ff;
text-shadow: 0px 0px 0px #999, 0px 0px 0px #888, 0px 0px 0px #777, 0px 0px 0px #6066, 0px 2px 0px #555, 0px 0px 0px #444, 0px 0px 0px #333, 0px 0px 0px #001135;
font:'ChunkFiveRegular';
}
.boxright1 {
position: absolute;
top: 65.3vh;
left: 17.5vw;
width: 61.0vw;
height: 35.0vh;
cursor:pointer;
border:2px solid black;
background-repeat:no-repeat;
background-size: contain;
background-image:url(images/name%20board%20witout%20rope2.png);
background-size: 40vw 55vh;
}
.boxright1 .box{
position: absolute;
}
.boxright1 .box:nth-child(1) {
top: 0px;
left: 155px;
}
.boxright1 .box:nth-child(2) {
top: 5px;
left:215px;
}
.boxright1 .box:nth-child(3) {
top: 0px;
left: 315px;
}
.boxright1 .box:nth-child(4) {
top: 5px;
left: 415px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>applying nth child to Class boxright1 not working</p>
<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">
<div class="box" id="box1" draggable="true" ondragstart="drag(event)" style="background-image:url(https://picsum.photos/200/300)">
<p name="values" id="name1" class="hidden"></p>
</div>
<div class="box" id="box2" draggable="true" ondragstart="drag(event)" style="background-image:url(https://picsum.photos/g/200/300)">
<p name="values" id="name2" class="hidden"></p>
</div>
<div class="box" id="box3" draggable="true" ondragstart="drag(event)" style="background-image:url(https://picsum.photos/200/300?image=0)">
<p name="values" id="name3" class="hidden"></p>
</div>
<div class="box" id="box4" draggable="true" ondragstart="drag(event)" style="background-image:url(https://picsum.photos/200/300/?gravity=east)">
<p name="values" id="name4" class="hidden"></p>
</div>
</div>
</div>
</div>
</div>
<div class="boxright1" ondrop="drop(event)" ondragover="allowDrop(event)" id="4" name="d"></div>
最佳答案
第一个问题是你在drop
例程中将掉落框的position
设置为unset
,导致框没有不再被定位。删除该行。
第二个问题是特异性。您首先定位 id,例如 #box1
,浏览器将保留为此定义的样式,无论您是否尝试使用 .boxright1 .box:nth-child 覆盖它们(...)
。
解决方案不是对原始选择器使用 id,而是使用类名。在下面的解决方案中,我已将 box1
等添加到框的类中,因此您可以使用 .box1
而不是 #box1
然后 .boxright1 .box:nth-child(...)
选择器将覆盖它。
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");
console.log(data);
/*$("#" + data).css("position", "unset");*/
ev.target.appendChild(document.getElementById(data));
}
body {
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
overflow: hidden;
background-size: 100vw 100vh;
}
.box1 {
position: absolute;
top: 28.3vh;
left: -10.98vw;
cursor: pointer;
border: 1px solid #0066CC;
background-repeat: no-repeat;
background-size: contain;
}
.box1 p {
width: 10.0vw;
height: 10.0vh;
border-radius: 25%;
}
.box2 {
position: absolute;
top: 13.7vh;
left: -10.98vw;
cursor: pointer;
border: 1px solid #0066CC;
background-repeat: no-repeat;
background-size: contain;
}
.box2 p {
width: 5.0vw;
height: 5.0vh;
border-radius: 25%;
}
.box3 {
position: absolute;
top: 7.7vh;
left: 43.98vw;
cursor: pointer;
border: 1px solid #0066CC;
background-size: contain;
background-repeat: no-repeat
}
.box3 p {
width: 7.0vw;
height: 7.0vh;
border-radius: 25%;
}
.box4 {
position: absolute;
top: 28.3vh;
left: 40.98vw;
cursor: pointer;
border: 1px solid #0066CC;
background-repeat: no-repeat;
background-size: cover;
background-size: contain;
}
.box4 p {
width: 10.0vw;
height: 10.0vh;
border-radius: 25%;
}
.container2 {
width: 50.1vw;
position: fixed;
top: 10.5vh;
left: 30.5vw;
}
.boxright1 p {
font-size: calc(2vw);
height: 4vh;
margin: 0;
color: white;
background-size: cover;
background-repeat: no-repeat;
color: #0066ff;
text-shadow: 0px 0px 0px #999, 0px 0px 0px #888, 0px 0px 0px #777, 0px 0px 0px #6066, 0px 2px 0px #555, 0px 0px 0px #444, 0px 0px 0px #333, 0px 0px 0px #001135;
font: 'ChunkFiveRegular';
}
.boxright1 {
position: absolute;
top: 65.3vh;
left: 17.5vw;
width: 61.0vw;
height: 35.0vh;
cursor: pointer;
border: 2px solid black;
background-repeat: no-repeat;
background-size: contain;
background-image: url(images/name%20board%20witout%20rope2.png);
background-size: 40vw 55vh;
}
.boxright1 .box {
position: absolute;
}
.boxright1 .box:nth-child(1) {
top: 0px;
left: 155px;
}
.boxright1 .box:nth-child(2) {
top: 5px;
left: 215px;
}
.boxright1 .box:nth-child(3) {
top: 0px;
left: 315px;
}
.boxright1 .box:nth-child(4) {
top: 5px;
left: 415px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>applying nth child to Class boxright1 not working</p>
<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">
<div class="box box1" id="box1" draggable="true" ondragstart="drag(event)" style="background-image:url(https://picsum.photos/200/300)">
<p name="values" id="name1" class="hidden"></p>
</div>
<div class="box box2" id="box2" draggable="true" ondragstart="drag(event)" style="background-image:url(https://picsum.photos/g/200/300)">
<p name="values" id="name2" class="hidden"></p>
</div>
<div class="box box3" id="box3" draggable="true" ondragstart="drag(event)" style="background-image:url(https://picsum.photos/200/300?image=0)">
<p name="values" id="name3" class="hidden"></p>
</div>
<div class="box box4" id="box4" draggable="true" ondragstart="drag(event)" style="background-image:url(https://picsum.photos/200/300/?gravity=east)">
<p name="values" id="name4" class="hidden"></p>
</div>
</div>
</div>
</div>
</div>
<div class="boxright1" ondrop="drop(event)" ondragover="allowDrop(event)" id="4" name="d"></div>
关于javascript - 使用 javascript 中的第 n 个子项指定图像在放置区域的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54068924/
我看到以下宏 here . static const char LogTable256[256] = { #define LT(n) n, n, n, n, n, n, n, n, n, n, n,
这个问题不太可能帮助任何 future 的访问者;它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关,这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用,visit
所以我得到了这个算法我需要计算它的时间复杂度 这样的 for i=1 to n do k=i while (k<=n) do FLIP(A[k]) k
n 的 n 次方(即 n^n)是多项式吗? T(n) = 2T(n/2) + n^n 可以用master方法求解吗? 最佳答案 它不仅不是多项式,而且比阶乘还差。 O(n^n) 支配 O(n!)。同样
我正在研究一种算法,它可以在带有变音符号的字符(tilde、circumflex、caret、umlaut、caron)及其“简单”字符之间进行映射。 例如: ń ǹ ň ñ ṅ ņ ṇ
嗯..我从昨天开始学习APL。我正在观看 YouTube 视频,从基础开始学习各种符号,我正在使用 NARS2000。 我想要的是打印斐波那契数列。我知道有好几种代码,但是因为我没有研究过高深的东西,
已关闭。这个问题是 off-topic 。目前不接受答案。 想要改进这个问题吗? Update the question所以它是on-topic用于堆栈溢出。 已关闭12 年前。 Improve th
谁能帮我从 N * N * N → N 中找到一个双射数学函数,它接受三个参数 x、y 和 z 并返回数字 n? 我想知道函数 f 及其反函数 f',如果我有 n,我将能够通过应用 f'(n) 来
场景: 用户可以在字符串格式的方程式中输入任意数量的括号对。但是,我需要检查以确保所有括号 ( 或 ) 都有一个相邻的乘数符号 *。因此 3( 应该是 3*( 和 )3 应该是 )*3。 我需要将所有
在 Java 中,表达式: n+++n 似乎评估为等同于: n++ + n 尽管 +n 是一个有效的一元运算符,其优先级高于 n + n 中的算术 + 运算符。因此编译器似乎假设运算符不能是一元运算符
当我阅读 this 问题我记得有人曾经告诉我(很多年前),从汇编程序的角度来看,这两个操作非常不同: n = 0; n = n - n; 这是真的吗?如果是,为什么会这样? 编辑: 正如一些回复所指出
我正在尝试在reveal.js 中加载外部markdown 文件,该文件已编写为遵守数据分隔符语法: You can write your content as a separate file and
我试图弄清楚如何使用 Javascript 生成一个随机 11 个字符串,该字符串需要特定的字母/数字序列,以及位置。 ----------------------------------------
我最近偶然发现了一个资源,其中 2T(n/2) + n/log n 类型 的递归被 MM 宣布为无法解决。 直到今天,当另一种资源被证明是矛盾的(在某种意义上)时,我才接受它作为引理。 根据资源(下面
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗?通过 editing this post 添加详细信息并澄清问题. 已关闭 8 年前。 Improve th
我完成的一个代码遵循这个模式: for (i = 0; i < N; i++){ // O(N) //do some processing... } sort(array, array + N
有没有办法证明 f(n) + g(n) = theta(n^2) 还是不可能?假设 f(n) = theta(n^2) & g(n) = O(n^2) 我尝试了以下方法:f(n) = O(n^2) &
所以我目前正在尝试计算我拥有的一些数据的 Pearson R 和 p 值。这是通过以下代码完成的: import numpy as np from scipy.stats import pearson
ltree 列的默认排序为文本。示例:我的表 id、parentid 和 wbs 中有 3 列。 ltree 列 - wbs 将 1.1.12, 1.1.1, 1.1.2 存储在不同的行中。按 wbs
我的目标是编写一个程序来计算在 python 中表示数字所需的位数,如果我选择 number = -1 或任何负数,程序不会终止,这是我的代码: number = -1 cnt = 0 while(n
我是一名优秀的程序员,十分优秀!