下面是关于HTML5+CSS3实现拖放的完整攻略。

HTML5+CSS3实现拖放(Drag and Drop)示例

什么是拖放

拖放是一种用户界面交互技术，包括拖曳和释放两个操作。在这个过程中，用户可以拖动某个物体，并且在容器中释放它，从而改变应用程序的状态。

HTML5拖放事件

HTML5中提供了五个拖放事件：

1. dragstart：当拖拽操作开始时触发；
2. dragend：当拖拽操作结束时触发；
3. dragenter：当被拖动的元素进入放置目标的可拖放区域时触发；
4. dragover：在允许放置目标上拖动被拖动的元素时触发；
5. drop：在放置被拖动的元素时触发。

实现拖放操作

要实现拖放操作，我们需要按照以下步骤进行：

1. 设置被拖拽元素的draggable属性为true；
2. 监听被拖拽元素的dragstart事件，并在事件处理函数中设置dataTransfer对象的数据；
3. 监听目标容器元素的dragover事件，并阻止事件默认行为，并在处理函数中设置dataTransfer对象的数据；
4. 监听目标容器元素的drop事件，并在事件处理函数中获取dataTransfer对象的数据。

下面有两个示例说明。

示例1：图片拖拽

HTML代码：

<div id="image-container">
  <img src="image.jpg" draggable="true" id="image">
</div>

JavaScript代码：

var image = document.getElementById("image");

image.addEventListener("dragstart", function(event) {
  event.dataTransfer.setData("text/plain", event.target.id);
});

var imageContainer = document.getElementById("image-container");

imageContainer.addEventListener("dragover", function(event) {
  event.preventDefault();
});

imageContainer.addEventListener("drop", function(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("text/plain");
  event.target.appendChild(document.getElementById(data));
});

这个示例中，将一个图片元素设置为可拖拽，并在拖拽开始时设置了dataTransfer对象的数据为被拖拽元素的id，然后在目标容器元素上监听了dragover和drop事件，阻止了事件的默认行为，并从dataTransfer对象中获取数据，并将被拖拽元素添加到目标容器中。

示例2：文件拖拽

HTML代码：

<div id="file-container">
  <p>将文件拖拽至此处上传</p>
</div>

JavaScript代码：

var fileContainer = document.getElementById("file-container");

fileContainer.addEventListener("dragover", function(event) {
  event.preventDefault();
});

fileContainer.addEventListener("drop", function(event) {
  event.preventDefault();
  var files = event.dataTransfer.files;
  // 模拟上传文件
  for(var i = 0; i < files.length; i++) {
    console.log("上传文件：" + files[i].name);
  }
});

这个示例中，用户可以将文件拖拽到一个指定的容器中，然后在目标容器元素上监听了dragover和drop事件，阻止了事件的默认行为，并从dataTransfer对象中获取文件数据，并将文件上传到服务器。

通过上面两个示例，我们可以看到，使用HTML5和CSS3可以很容易实现拖放操作，并扩展了Web应用程序的交互性。