gpt4 book ai didi

javascript - 单击按钮时有没有办法检查 Div 内的图像?

转载 作者:行者123 更新时间:2023-12-03 10:30:10 25 4
gpt4 key购买 nike

嗨,我有两个 Div 元素(70px x 70px)和两个图像,这些图像具有 HTML5 拖放功能,可以拖到 Div 框中。

我想要做的是,当图像被拖入 div 框中并单击按钮时,我希望 div 框的边框根据 Div 内的图像更改颜色。

有没有办法使用 Javascript 来做到这一点?图像有 ID,那么是否可以编写一个使用它的函数?

这是我的代码:

CSS:

#Drop1 {width:70px;height:70px;padding:10px;border:1px solid#aaaaaa;}
#Drop2 {width:70px;height:70px;padding:10px;border:1px solid#aaaaaa;}

JS:

function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("text/html", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("text/html");

var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.id = "newId";
ev.target.appendChild(nodeCopy);
}

HTML:

<body>
<div id="Drop1" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<div id="Drop2" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<img id="drag1" src="forward.png" draggable="true" ondragstart="drag(event)" width="64" height="64">
<img id="drag2" src="left.png" draggable="true" ondragstart="drag(event)" width="64" height="64">
</body>

最佳答案

这是您想要完成的事情吗?

JS

function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("text/html", ev.target.id);
}

function drop(ev) {
ev.preventDefault();

var data = ev.dataTransfer.getData("text/html"),
nodeCopy = document.getElementById(data).cloneNode(true),
type = nodeCopy.src;

nodeCopy.id = "newId";
ev.target.appendChild(nodeCopy);

if(type.indexOf(".png") !== -1) {
ev.target.className = 'red-border';
} else if(type.indexOf(".jpg") !== -1) {
ev.target.className = 'green-border';
} else {
ev.target.className = 'gray-border';
}

}

CSS

#Drop1 {width:70px;height:70px;padding:10px;border:1px solid#aaaaaa;}
#Drop2 {width:70px;height:70px;padding:10px;border:1px solid#aaaaaa;}

#Drop1.red-border,
#Drop2.red-border {
border: 1px solid red;
}

#Drop1.green-border,
#Drop2.green-border {
border: 1px solid green;
}

#Drop1.gray-border,
#Drop2.gray-border {
border: 1px solid darkgray;
}

Plunker demo

带有按钮的更新版本

function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("text/html", ev.target.id);
}

function drop(ev) {
ev.preventDefault();

var data = ev.dataTransfer.getData("text/html"),
nodeCopy = document.getElementById(data).cloneNode(true),
type = nodeCopy.src;

nodeCopy.id = "newId";
ev.target.appendChild(nodeCopy);
}

function checkImages() {
var drop1Elem = document.getElementById('Drop1'),
drop2Elem = document.getElementById('Drop2');

if(drop1Elem.childNodes.length >= 1) {
if(drop1Elem.childNodes[0].className === 'item1') {
drop1Elem.className = 'red-border';
} else if(drop1Elem.childNodes[0].className === 'item2') {
drop1Elem.className = 'green-border';
} else {
drop1Elem.className = 'gray-border';
}
}

if(drop2Elem.childNodes.length >= 1) {
if(drop2Elem.childNodes[0].className === 'item1') {
drop2Elem.className = 'red-border';
} else if(drop2Elem.childNodes[0].className === 'item2') {
drop2Elem.className = 'green-border';
} else {
drop2Elem.className = 'gray-border';
}
}
}

Plunker demo

关于javascript - 单击按钮时有没有办法检查 Div 内的图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29254962/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com