我来帮你搞定这个问题！你现在的核心痛点是：想在特定背景图上放置可拖拽的卡片，同时在浏览器窗口缩放时，卡片能保持相对背景的位置、自动适配尺寸，还不能丢失拖拽功能对吧？咱们一步步拆解解决：

先揪出隐藏的小坑：CSS类名不匹配 #

你代码里第一个问题是类名大小写/格式不一致：JS里给标题容器加的是card-block类，但CSS里写的是.cardBlock（大写B+无连字符），这直接导致标题栏的样式完全没生效，先把这个修正过来！

核心调整：把固定定位改成相对容器定位 #

你之前用position: fixed是相对于浏览器视口定位的，窗口缩放时自然会跑偏。如果卡片是要放在特定背景图上，建议把背景图的容器（也就是你的.postItSet）设为相对定位，卡片用position: absolute，这样卡片会相对于背景容器定位，窗口缩放时背景容器跟着适配，卡片也能保持相对位置。

完整修改后的代码示例 #

1. 修正后的CSS样式 #

/* 背景图容器样式 - 确保卡片基于它定位 */
.postItSet {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-image: url('你的背景图URL'); /* 替换成你的背景图地址 */
  background-size: cover;
  background-position: center;
}

/* 卡片基础样式 */
.card {
  position: absolute; /* 改为absolute，相对于父容器定位 */
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
  cursor: grab;
  word-wrap: break-word;
  width: fit-content; /* 宽度自适应内容 */
  max-width: 80%; /* 限制最大宽度，适配小屏幕 */
  padding: 0; /* 去掉默认padding，让card-block撑满头部 */
}

/* 卡片头部样式 - 修正类名和JS保持一致 */
.card-block {
  padding: 10px;
  cursor: grab;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
  word-wrap: break-word;
}

/* 拖拽时的光标变化 */
.card:active {
  cursor: grabbing;
}

2. 带拖拽功能的JS代码 #

var principale = document.getElementsByClassName("postItSet")[0];
var card = document.createElement('div');
card.className = "card";
card.setAttribute("id", "mydiv" + id1);
card.draggable = true; // 开启原生可拖拽属性

// 拖拽开始：记录卡片ID，设置半透明效果
card.addEventListener('dragstart', function(e) {
  e.dataTransfer.setData('text/plain', this.id);
  this.style.opacity = '0.5';
});

// 拖拽结束：恢复透明度
card.addEventListener('dragend', function(e) {
  this.style.opacity = '1';
});

// 背景容器允许拖拽放置
principale.addEventListener('dragover', function(e) {
  e.preventDefault(); // 必须阻止默认行为才能触发drop事件
});

// 放置卡片：计算相对容器的位置
principale.addEventListener('drop', function(e) {
  e.preventDefault();
  var cardId = e.dataTransfer.getData('text/plain');
  var targetCard = document.getElementById(cardId);
  
  // 计算相对于背景容器的坐标（居中放置）
  var containerRect = principale.getBoundingClientRect();
  var x = e.clientX - containerRect.left - targetCard.offsetWidth / 2;
  var y = e.clientY - containerRect.top - targetCard.offsetHeight / 2;
  
  // 限制卡片不超出容器范围
  targetCard.style.left = Math.max(0, Math.min(x, containerRect.width - targetCard.offsetWidth)) + 'px';
  targetCard.style.top = Math.max(0, Math.min(y, containerRect.height - targetCard.offsetHeight)) + 'px';
  
  // 保存位置百分比，用于窗口缩放时适配
  saveCardPosition(targetCard);
});

// 构建卡片内部元素
var cardBlock = document.createElement('div');
cardBlock.className ="card-block"; // 和CSS类名保持一致
var cardTitle = document.createElement('div');
cardTitle.className = "card-title";
cardTitle.innerHTML = this.model.choice ? "anonymous" : this.profil.user.prenom;

var cardText = document.createElement('div');
cardText.className = "card-text";
cardText.setAttribute("id", "mydivheader");
cardText.innerHTML = self.model.contenu;

cardBlock.appendChild(cardTitle);
cardBlock.appendChild(cardText);
card.appendChild(cardBlock);
principale.appendChild(card);

// 保存卡片初始位置百分比
saveCardPosition(card);

// 窗口缩放时，根据百分比重新定位卡片
window.addEventListener('resize', function() {
  var allCards = document.querySelectorAll('.card');
  allCards.forEach(function(card) {
    var containerRect = principale.getBoundingClientRect();
    var xPercent = parseFloat(card.getAttribute('data-x')) || 0;
    var yPercent = parseFloat(card.getAttribute('data-y')) || 0;
    
    // 根据容器尺寸重新计算位置
    var newX = (containerRect.width * xPercent) / 100;
    var newY = (containerRect.height * yPercent) / 100;
    
    card.style.left = Math.max(0, Math.min(newX, containerRect.width - card.offsetWidth)) + 'px';
    card.style.top = Math.max(0, Math.min(newY, containerRect.height - card.offsetHeight)) + 'px';
  });
});

// 辅助函数：保存卡片相对于容器的位置百分比
function saveCardPosition(card) {
  var containerRect = principale.getBoundingClientRect();
  var cardRect = card.getBoundingClientRect();
  
  var xPercent = ((cardRect.left - containerRect.left) / containerRect.width) * 100;
  var yPercent = ((cardRect.top - containerRect.top) / containerRect.height) * 100;
  
  card.setAttribute('data-x', xPercent);
  card.setAttribute('data-y', yPercent);
}

关键优化点说明 #

1. 定位逻辑：用absolute替代fixed，让卡片绑定到背景容器，窗口缩放时自动保持相对位置。
2. 拖拽稳定性：用原生drag API绑定事件，直接挂载在卡片元素上，避免DOM变动导致事件丢失；如果想要更流畅的拖拽体验，也可以替换成mousedown/mousemove/mouseup事件组合。
3. 响应式适配：通过saveCardPosition保存位置百分比，窗口缩放时重新计算坐标，确保卡片始终在背景图的相对位置上。
4. 尺寸控制：用width: fit-content+max-width让卡片自适应内容，同时不会超出屏幕范围，配合word-wrap: break-word确保文本自动换行。

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