javascript - 如何在拖放中使用jquery删除css属性
问题描述
我有four images
里面class
box
and id
box1
, box2
, box3
and box4
..
当我将图像拖放到boxright1
时,图像没有正确地拖放到矩形中。
我已经在放置区域添加tried
了disable property absolute
of #box(number)
,以便它将 gt 变成矩形......但是didnt worked
。
我希望图像正确地放在矩形上
如何做到这一点?
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").removeAttr("position");
ev.target.appendChild(document.getElementById(data));
}
#box1 {
position: absolute;
top: 25.3vh;
left: -10.98vw;
background-repeat: no-repeat;
background-size: contain;
}
#box1 p {
width: 10.0vw;
height: 10.0vh;
border-radius: 25%;
}
#box2 {
position: absolute;
top: 4.7vh;
left: -10.98vw;
cursor:pointer;
border:px solid #0066CC;
background-repeat:no-repeat;
background-size: contain;
}
#box2 p {
width: 5.0vw;
height: 5.0vh;
border-radius: 25%;
}
#box3 {
position: absolute;
top: 2.7vh;
left: 43.98vw;
background-size: contain;
background-repeat:no-repeat;
}
#box3 p {
width: 7.0vw;
height: 7.0vh;
border-radius: 25%;
}
#box4 {
position: absolute;
top: 27.3vh;
left: 40.98vw;
background-repeat:no-repeat;
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;
}
.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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>not able to drop correctly on the rectangle:</p>
<div class="container2">
<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 class="boxright1" ondrop="drop(event)" ondragover="allowDrop(event)" id="4" name="d"></div>
解决方案
考虑这个包含您所需的Sortable的库 。您可以使用此库制作和删除任何类型的 DOM
推荐阅读
- java - 如何在 Beanshell 中使用或转义 java 8 Lambda 表达式
- android - Android - SMS Retriever API - 计算应用程序的哈希字符串问题
- google-forms - 如何在谷歌表单中设置默认语言以从不同的浏览器进行调查
- javascript - 如何使用闭包编译器从另一个压缩文件中获取变量
- junit - 带有 mockito 的多线程类的 junit
- python - Pandas DataFrame 的多个列表
- webstorm - 在 WebStorm 的调试控制台中显示运行时变量
- node.js - AWS Cognito 托管 UI - 如何允许 EXTERNAL_PROVIDER 用户创建密码?
- python - 如何在 ruamel 中保留评论
- django - 在 django 的 get 方法中隐藏 csrf 令牌