js css3实现图片拖拽效果

实现图片拖拽效果，可以使用HTML5中新增的drag and drop API，也可以使用JavaScript和CSS3实现。以下是基于JavaScript和CSS3实现图片拖拽效果的攻略：

前置知识

在实现图片拖拽效果前，需要掌握以下知识:

• 事件的监听与触发
• DOM操作
• CSS3 transform属性
• HTML5 draggable属性

实现步骤

第一步： 基础HTML结构

我们先来构建基础HTML结构，包含一个容器和多个图片:

<div class="container">
  <img src="img/img1.jpg" alt="">
  <img src="img/img2.jpg" alt="">
  <img src="img/img3.jpg" alt="">
  <!-- ... more images ... -->
</div>

第二步：CSS样式设置

需要为图片和容器设置一些基础的CSS样式，以便后续实现拖拽的效果。其中包括容器属性：设置宽度，居中，边框等，以及图片属性：设置width和height。

.container{
  width: 800px;
  margin: 0 auto;
  border: 1px solid gray;
  text-align:center;
}
.container img{
  width: 200px;
  height: 200px;
  margin:10px;
}

第三步：JavaScript代码实现

至此，我们已经完成了基础HTML结构和基础CSS样式设计。接下来，我们使用JavaScript和CSS3实现图片拖拽效果，主要步骤包括以下几步：

1.创建拖拽状态变量

在JavaScript中，需要手动设置一个用于拖拽的状态变量dragging。在拖拽开始的时候，将变量设置为true，在结束或者取消拖拽的的时候设置为false。

let dragging = false;

2.为所有图片添加拖拽支持

为每个图片添加拖拽事件监听，然后在事件处理程序中执行以下步骤：

• 阻止默认事件
• 设置当前图片即将拖拽的数据（dataTransfer对象的setData方法）
• 设置拖拽状态为真

示例代码：

const imgs = document.querySelectorAll(".container img");

for (const img of imgs) {
  img.addEventListener("dragstart", function(event) {
    event.preventDefault();
    event.dataTransfer.setData("text/plain", "");
    dragging = true;
    event.target.classList.add("dragging");
  });
}

在这个示例代码中，我们给每个图片添加了一个事件监听器，该事件监听器在开始拖拽之前阻止了默认的拖拽事件，并向drag and drop API设置了拖拽的数据（使用event.dataTransfer.setData("text/plain", "")方法），然后将拖拽状态变量设置为真，并在当前图片上添加一个拖动中的样式类“dragging”。

3.在外部容器上添加拖拽监听

在外部容器上添加拖拽监听器，绑定拖拽过程中的事件处理程序。在事件处理程序中，可以添加以下步骤：

• 阻止默认事件
• 获取当前鼠标的x和y坐标
• 将鼠标坐标减去拖拽元素的偏移量，得到一个相对于拖拽元素左上角的位置
• 将拖拽元素的位置设置为该位置
• 设置拖拽状态为true

示例代码：

const container = document.querySelector(".container");

container.addEventListener("dragover", function(event) {
  event.preventDefault();
  const x = event.clientX;
  const y = event.clientY;
  for (const img of imgs) {
    if (dragging) {
      img.style.transform = `translate(${x}px, ${y}px)`;
    }
  }
});

container.addEventListener("dragend", function(event) {
  dragging = false;
  for (const img of imgs) {
    img.classList.remove("dragging");
    img.style.transform = "";
  }
});

在这个代码示例中，我们为容器添加了拖拽监听器，并执行拖拽过程中的事件处理程序。该事件处理程序阻止默认拖拽事件，然后获取鼠标当前的坐标，并设置图片位置为鼠标坐标。最后，拖动结束时将拖拽状态变量设置为false，为每个图片移除“dragging”类，并重置图片位置。

示例代码

这里提供两个完整的示例代码：

示例一

以下是示例一的完整代码，实现了在页面中拖动图片的效果：

<!-- HTML -->
<div class="container">
  <img src="/path/to/image1.png">
  <img src="/path/to/image2.png">
  <img src="/path/to/image3.png">
  <!-- more images ... -->
</div>

<!-- CSS -->
.container {
  border: 2px dotted gray;
  padding: 20px;
}

.container img {
  height: 60px;
  margin: 10px;
  width: 60px;
}

.container img.dragging {
  opacity: 0.5;
}

<!-- JavaScript -->
<script>
  let dragging = false;
  const images = document.querySelectorAll('.container img');

  for (const img of images) {
    img.addEventListener('dragstart', function(e) {
      e.preventDefault();
      dragging = true;
      e.dataTransfer.setData('text/plain', '');
      e.target.classList.add('dragging');
    });
  }

  document.addEventListener('dragover', function(e) {
    e.preventDefault();
    const x = e.clientX;
    const y = e.clientY;
    for (const img of images) {
      if (dragging) {
        img.style.transform = `translate(${x}px, ${y}px)`;
      }
    }
  });

  document.addEventListener('dragend', function(e) {
    dragging = false;
     for (const img of images) {
      img.classList.remove('dragging');
      img.style.transform = '';
     }
  });
</script>

示例二

以下是示例二的完整代码，实现了从文件夹中拖动图片到页面的效果：

<!-- HTML -->
<div class="container" ondrop="drop(event)" ondragover="dragover(event)">
  Drop images here.
</div>

<!-- JS -->
<script>
  function drop(e) {
    e.preventDefault();
    const files = e.dataTransfer.files;
    for (const file of files) {
      const reader = new FileReader();
      reader.onload = function(event) {
        const img = document.createElement('img');
        img.classList.add('dropped-image');
        img.src = event.target.result;
        document.querySelector('.container').appendChild(img);
      };
      reader.readAsDataURL(file);
    }
  }

  function dragover(e) {
    e.preventDefault();
  }
</script>

<!-- CSS -->
 .container {
   border: 2px dotted gray;
   padding: 20px;
   min-height: 100px;
 }

 .dropped-image {
   height: 60px;
   margin: 10px;
   width: 60px;
 }

这个示例展示了如何实现从文件夹向页面中拖动图片，并在页面中展示它们。在此示例中，我们定义了两个函数drop()和dragover()，分别实现了容器的拖放事件。

这个示例中的代码稍微有些复杂，实际上这只是从文件夹中传递图片到容器的方法。但这里的主要思想仍然适用于其他情况：只需将处理拖放时创建图像的代码改为在dragstart事件处理程序中设置传递的数据即可。