基于JS/jQuery实现Gridster页面图片多选功能的技术问询

已实现功能概述 #

• 基于Gridster插件搭建可拖拽/调整的部件布局体系
• 部件支持通过+按钮唤起模态框，批量选择并添加图片（此功能已稳定运行）
• 点击图片所在的div容器时，自动切换preset类，实现高亮选中/取消选中的交互效果

核心代码实现示例 #

1. 图片选中状态切换逻辑 #

// 绑定图片容器的点击事件，支持动态添加的元素
$('.gridster-item').on('click', '.image-container', function() {
  $(this).toggleClass('preset');
});

2. 模态框批量添加图片逻辑（参考实现） #

// 打开图片选择模态框
$('.add-image-btn').on('click', function() {
  $('#image-select-modal').modal('show');
});

// 确认添加图片的按钮逻辑
$('#confirm-add-images').on('click', function() {
  const selectedFiles = $('#image-file-input')[0].files;
  if (selectedFiles.length === 0) return;

  const targetItem = $(this).data('target-gridster-item'); // 提前绑定目标部件
  Array.from(selectedFiles).forEach(file => {
    const imgUrl = URL.createObjectURL(file);
    // 构建图片容器元素
    const imgContainer = `
      <div class="image-container">
        <img src="${imgUrl}" alt="${file.name}">
      </div>
    `;
    $(targetItem).append(imgContainer);
  });

  $('#image-select-modal').modal('hide');
  $('#image-file-input').val(''); // 清空文件选择器
});

3. 高亮选中样式（CSS） #

.image-container {
  position: relative;
  margin: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.preset {
  border: 3px solid #2563eb;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.4);
  transform: scale(1.03);
}

后续扩展建议（针对你提到的"此外我还……"） #

如果是要实现图片删除功能（对应X按钮），可以参考以下实现：

• 给每个图片容器添加删除按钮：

<div class="image-container">
  <img src="path/to/image.jpg" alt="uploaded-image">
  <button class="delete-img-btn">X</button>
</div>

• 绑定删除事件（避免触发选中逻辑）：

$('.gridster-item').on('click', '.delete-img-btn', function(e) {
  e.stopPropagation(); // 阻止事件冒泡到父容器
  $(this).closest('.image-container').remove();
});

如果是其他需求（比如多选图片、批量删除、图片排序等），可以补充具体场景后，我再帮你细化实现方案~

内容的提问来源于stack exchange，提问作者NewBie