27
4
I am able to try to drag and drop multiple images into a same div which is under a .
There will be an initial value for each image and those many images will be present inside the div. When we drag and drop any image it should add that image with the existing images inside the div.
我能够尝试拖放多个图像到同一个div下。每个图像都有一个初始值，这些图像将出现在div中。当我们拖放任何图像时，它应该将该图像与div中的现有图像一起添加。
I tried drag and drop for 2 images.
First image is shown in div with the initial value and when I drag drop the second image it works fine. Again if i Try to drop first image all the 2nd images dropped in the div changes to 1st image.
I want to save the number of different images dropped inside a div without replacing the existing images with the current image that has been dropped.
我试着拖放了2张图片。第一个图像以初始值显示在div中，当我拖放第二个图像时，它工作正常。同样，如果我尝试删除第一个图像，div中所有的第二个图像都会变为第一个图像。我希望保存放置在div中的不同图像的数量，而不用已放置的当前图像替换现有图像。
I tried the following condition
我尝试了以下条件
(condition1 ? img1 : (condition2 ? img1 : img2));
(条件1？图片1：(条件2？Img1：img2))；
I am trying to do with conditional statement.
我正在尝试使用条件语句。
Also I am saving the number of images dropped into a state.
此外，我正在保存图像的数量下降到一个状态。
个人中心
文章发布
退出<!DOCTYPE html>
<html>
<head>
<style>
.droppable {
width: 300px;
height: 300px;
border: 2px dashed #ccc;
}
img {
width: 50px;
height: 50px;
margin: 5px;
}
</style>
</head>
<body>
<div class="droppable" id="dropArea">
<!-- Images will be added here -->
</div>
<script>
const dropArea = document.getElementById('dropArea');
const state = {};
// Add a dragover event listener to allow dropping.
dropArea.addEventListener('dragover', (e) => {
e.preventDefault();
});
// Add a drop event listener to handle the dropped items.
dropArea.addEventListener('drop', (e) => {
e.preventDefault();
const file = e.dataTransfer.files[0];
// Check if the file is an image.
if (file.type.startsWith('image/')) {
const imgUrl = URL.createObjectURL(file);
// Check if the image URL is already in the state.
if (!state[imgUrl]) {
state[imgUrl] = 1; // Initialize count for this image URL.
} else {
state[imgUrl]++; // Increment the count for this image URL.
}
// Update the HTML content of the div based on the state.
updateDivContent();
}
});
// Function to update the HTML content of the div based on the state.
function updateDivContent() {
dropArea.innerHTML = '';
for (const imgUrl in state) {
const imgCount = state[imgUrl];
const img = new Image();
img.src = imgUrl;
img.alt = `Image ${imgCount}`;
dropArea.appendChild(img);
}
}
</script>
</body>
</html>
To achieve your goal of allowing users to drag and drop multiple images into a while maintaining the count of different images dropped without replacing existing images with the current image that has been dropped, you can follow these steps:
要实现您的目标，即允许用户将多个图像拖放到中，同时保持已拖放的不同图像的数量，而不用已拖放的当前图像替换现有图像，您可以执行以下步骤：
Maintain a state to keep track of the images dropped and their counts.
When a new image is dropped, check if it's already in the . If it's not present, add it to the state and update the count. If it's already present, do nothing.
Update the HTML content of the based on the state to display the images and their counts.
维护一种状态以跟踪丢弃的图像及其计数。当一个新图像被删除时，检查它是否已经在。如果不存在，则将其添加到状态并更新计数。如果它已经存在，什么都不做。根据状态更新的HTML内容以显示图像及其计数。
OP is using react
操作员正在使用REACT
27
4
0
我知道这类问题已经得到解答，但就我而言，我已经尝试了所有配置，但仍然不起作用。我需要对我的配置有一个新的看法(我确信我错过了一些东西)。两个附加程序都会记录所有级别 我想将所有包的信息 >= 记录到控
我正在对 Windows 移动设备上的代码性能进行一些基准测试，并注意到某些算法在某些主机上的表现明显更好，而在其他主机上则明显更差。当然，考虑到时钟速度的差异。 供引用的统计数据(所有结果均由同一个
我有一个程序可以计算多边形的面积和周长。程序还会确认面积和周长的计算结果是否与预期结果相同。 我不明白发生了什么，但确认面积和周长是否与预期相同的验证部分无法正常工作。 例如，我现在测试并在所有情况下
Codepen :(对于那些想直接进入的人来说，这是一个代码笔。在 Chrome 和 IE 中尝试一下，看看结果的不同) 我正在尝试使用 css3 转换/过渡，因为它们比 jquery 效果更流畅。
我有几个不同的正则表达式要在给定文本中匹配和替换。 regex1 :如果文本包含单词“Founder”，则将所有文本替换为首席执行官 正则表达式2:如果文本包含9位数字，则将其替换为NUM 我尝试使用
我编写了多线程应用程序，它从每个线程的数据库连接到一些电子邮件帐户。我知道 JavaMail 没有任何选项可以使用 SOCKS5 进行连接，因此我决定通过 System.setProperty 方法使
如您所见，这是我当前 Storyboard的不同设备预览。底部的透明绿色被另一个 View Controller 占用，但需要为每个不同的尺寸类固定间距。我尝试将 Storyboard 中的宽度和高度
我正在创建一个游戏，我需要能够改变玩家 Sprite 的速度。我认为最好的选择是通过重力影响 Sprite 。为了给用户运动的感觉，我希望背景以完全相同的速度向相反的方向移动。 我怎样才能给背景一个不
我正在查看BTrees库并注意到有多个 TreeSet (和其他)类，例如 BTrees.IOBTree.TreeSet BTrees.OOBTree.TreeSet BTrees.LFBTree.T
我有一个小型 C++ 库，必须为 armeabi 和 armeabi7a 编译。我还有一个非常大的 c++ 库，只需要为 armeabi 编译。现在正在为两种架构编译它们(使用 NDK)，但这使我的
我需要根据站点的当前部分稍微更改主题。 似乎 MuiThemeProvider 只在加载时设置 muiTheme；但需要在 props 变化时更新。 如何做到这一点？ 最佳答案 您可以尝试将主题放在包
如何创建两个每个都有自己的计数器的 lSTListing 环境？ 如果我使用例如 \lstnewenvironment{algorithm}[2]{ \renewcommand\lstlist
我想使用 Travis-CI 和 Github 基于分支设置部署。 IE。 - 如果我们从 develop 构建- 然后执行 /deploy.rb使用 DEV 环境主机名，如果 master - 然后
我有一个带有数据验证的 WPF MVVM 数据表单窗口。很多控件都是文本框。目前，数据绑定(bind)触发器设置为默认值，即。 e.失去焦点。这意味着仅在可能完全填写字段时才对其进行验证。所以当删除一
我有许多应用程序的内容页面，并最终为每个内容页面编写了很多 View 模型。例如。如果我有一个包含项目组的列表，我将有一个 ShowAllViewModel并绑定(bind)到内容页面和列表中单个项目
我有一个通用 View 和 4 个其他 View 。我在通用 View 中使用 Bootstrap 选项卡(导航选项卡)。我希望其他 4 个 View 成为通用 View 中 4 个选项卡的内容。由于
我希望针对 Maven 发布插件的不同目标有不同的配置选项。故事是这样的: 我正在将 Git 用于 SCM。我希望release:prepare插件在本地完成所有操作，并让release:perfor
我正在为一个项目使用AbstractTableModel制作一个自定义TableModel，并且我需要找到一种方法让复选框显示在某些行上，而不是其他行上。我已经实现了 getColumn 方法，但我希
摘自《Javascript 忍者的 secret 》一书: EVENTS ARE ASYNCHRONOUS Events, when they happen, can occur at unpredi
我正在尝试配置我的第一个 GWT 记录器，到目前为止，我已经将日志消息打印到我的 JS 控制台(FF 的 Firebug): 最终，我希望非SEVERE 消息转到consoleHa
我是一名优秀的程序员,十分优秀！