基于jQuery Sortable的图片拖拽至独立容器功能实现咨询

嘿，新手朋友别担心～这个拼图拖拽的需求其实没你想的那么复杂，我给你整理了两种实用的实现方案，你可以根据自己的情况选一个来试试！

本质就是让可拖拽图片和容器之间建立交互：拖拽时传递图片信息，容器接收后替换自身内容（或背景），模拟拼图嵌入的效果。下面是具体的实现方式：

如果想亲手搞懂拖拽的逻辑，纯手写原生代码是最好的选择，步骤清晰，也不用依赖外部库：

1. 标记可拖拽元素：给IMG 1-4添加draggable="true"属性，监听拖拽开始事件存储图片信息
2. 配置容器元素：给CONTAINER 1-4监听拖拽经过、拖拽离开和放置事件，处理图片嵌入逻辑

<!-- HTML结构 -->
<div class="puzzle-board">
  <!-- 可拖拽图片 -->
  <img src="img1.jpg" draggable="true" class="draggable-img" data-img="img1.jpg" alt="IMG 1">
  <img src="img2.jpg" draggable="true" class="draggable-img" data-img="img2.jpg" alt="IMG 2">
  <img src="img3.jpg" draggable="true" class="draggable-img" data-img="img3.jpg" alt="IMG 3">
  <img src="img4.jpg" draggable="true" class="draggable-img" data-img="img4.jpg" alt="IMG 4">

  <!-- 不可拖拽容器 -->
  <div class="container" data-target="container1">CONTAINER 1</div>
  <div class="container" data-target="container2">CONTAINER 2</div>
  <div class="container" data-target="container3">CONTAINER 3</div>
  <div class="container" data-target="container4">CONTAINER 4</div>
</div>

<style>
.draggable-img {
  width: 100px;
  height: 100px;
  margin: 10px;
  cursor: grab;
}
.container {
  width: 100px;
  height: 100px;
  border: 2px dashed #ccc;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.container.filled {
  border: none;
}
</style>

<script>
// 获取所有可拖拽图片和容器
const draggableImgs = document.querySelectorAll('.draggable-img');
const containers = document.querySelectorAll('.container');

// 处理拖拽开始事件
draggableImgs.forEach(img => {
  img.addEventListener('dragstart', (e) => {
    // 把图片的地址存到拖拽数据里
    e.dataTransfer.setData('text/plain', img.dataset.img);
    // 拖拽时给图片加半透明效果，提升交互感
    img.style.opacity = '0.5';
  });

  // 拖拽结束后恢复图片状态
  img.addEventListener('dragend', () => {
    img.style.opacity = '1';
  });
});

// 处理容器的拖拽交互
containers.forEach(container => {
  // 必须阻止默认行为，容器才能接收拖拽元素
  container.addEventListener('dragover', (e) => {
    e.preventDefault();
    // 拖拽经过时高亮容器边框
    container.style.borderColor = '#2196F3';
  });

  // 拖拽离开容器时恢复边框样式
  container.addEventListener('dragleave', () => {
    container.style.borderColor = '#ccc';
  });

  // 处理放置事件，完成拼图嵌入
  container.addEventListener('drop', (e) => {
    e.preventDefault();
    // 取出之前存储的图片地址
    const imgSrc = e.dataTransfer.getData('text/plain');
    // 替换容器内容为目标图片，让图片占满容器
    container.innerHTML = `<img src="${imgSrc}" style="width:100%;height:100%;object-fit:cover;">`;
    // 给容器添加填充完成的样式标记
    container.classList.add('filled');
    // 恢复容器边框颜色
    container.style.borderColor = '#ccc';
  });
});
</script>

要是你想省事儿，快速实现效果，用现成的轻量拖拽库就很合适，比如SortableJS，它封装了复杂的拖拽逻辑，代码量少很多：

<!-- HTML结构 -->
<div class="draggable-area">
  <img src="img1.jpg" class="puzzle-piece" alt="IMG 1">
  <img src="img2.jpg" class="puzzle-piece" alt="IMG 2">
  <img src="img3.jpg" class="puzzle-piece" alt="IMG 3">
  <img src="img4.jpg" class="puzzle-piece" alt="IMG 4">
</div>

<div class="container-area">
  <div class="puzzle-container">CONTAINER 1</div>
  <div class="puzzle-container">CONTAINER 2</div>
  <div class="puzzle-container">CONTAINER 3</div>
  <div class="puzzle-container">CONTAINER 4</div>
</div>

<style>
.puzzle-piece {
  width: 100px;
  height: 100px;
  margin: 10px;
  cursor: grab;
}
.puzzle-container {
  width: 100px;
  height: 100px;
  border: 2px dashed #ccc;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.puzzle-container.filled {
  border: none;
}
</style>

<script>
// 初始化拖拽区域（拖拽时复制原图片，不移除）
Sortable.create(document.querySelector('.draggable-area'), {
  group: {
    name: 'puzzle',
    pull: 'clone',
    put: false
  },
  animation: 150, // 拖拽动画时长
});

// 初始化容器区域（只允许接收拖拽的图片）
Sortable.create(document.querySelector('.container-area'), {
  group: {
    name: 'puzzle',
    pull: false,
    put: true
  },
  animation: 150,
  // 图片放入容器时触发的回调
  onAdd: function(evt) {
    const draggedImg = evt.item;
    // 调整图片尺寸，让它占满容器
    draggedImg.style.width = '100%';
    draggedImg.style.height = '100%';
    draggedImg.style.objectFit = 'cover';
    // 给容器添加填充完成的样式
    evt.target.classList.add('filled');
  }
});
</script>

• 测试时要确保图片路径正确，不然会显示不出来哦～
• 如果想做「对应容器只能放对应图片」的逻辑（比如IMG1只能放CONTAINER1），可以给元素加自定义属性（比如data-match="1"），然后在放置事件里判断：

  // 原生API的drop事件里添加判断
  if (container.dataset.target === `container${img.dataset.match}`) {
    // 执行嵌入逻辑
  } else {
    alert('放错位置啦！');
    // 可以把图片放回原位置
  }
  

• 样式可以根据自己的需求调整，比如拖拽时的透明度、容器高亮颜色等，让交互更友好。

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