[分享]css3拖拽换位置

CSS3拖拽换位置是一种用户友好且美观的功能，可让用户自由调整页面中元素的位置。以下将介绍如何使用CSS3实现拖拽换位置。首先，在HTML中创建元素并添加拖拽属性。例如： 这是一个可拖拽的元素 然后...

CSS3拖拽换位置是一种用户友好且美观的功能，可让用户自由调整页面中元素的位置。以下将介绍如何使用CSS3实现拖拽换位置。

首先，在HTML中创建元素并添加拖拽属性。例如：

<div id="element1" draggable="true">
  这是一个可拖拽的元素
</div> 

然后在CSS中定义拖拽过程中的样式，例如：

#element1{
  width: 100px;
  height: 100px;
  background-color: #aaa;
  position: absolute;
}

#element1:active{
  opacity: 0.5;
} 

以上样式定义了拖拽元素的宽度、高度、背景色和绝对定位等属性。在拖拽时，元素的透明度会发生变化。

接着使用JavaScript实现拖拽交换位置。例如：

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

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

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

element1.addEventListener("drop", function(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("text");
  var targetElement = document.getElementById(data);
  var dropPosition = event.target.getBoundingClientRect();

  if (event.clientY >= dropPosition.bottom) {
    event.target.parentElement.insertBefore(targetElement, event.target.nextElementSibling);
  } else {
    event.target.parentElement.insertBefore(targetElement, event.target);
  }
}); 

以上JavaScript代码实现了拖拽交换元素位置的功能。当元素被拖拽时，将元素ID存储到数据传输对象中。当元素被拖动到另一个元素上方时，阻止默认事件并获取拖拽元素和目标元素的Bounding Client Rect。根据鼠标位置将拖拽元素插入到目标元素的下一个兄弟节点或上一个节点位置。

最后，在CSS中添加过渡效果，使交换元素位置时更加平滑。例如：

#element1{
  width: 100px;
  height: 100px;
  background-color: #aaa;
  position: absolute;
  transition: all 0.2s ease-in-out;
}

#element1:active{
  opacity: 0.5;
} 

以上代码为元素添加了0.2秒的过渡效果，使元素交换位置时更加平滑。最终效果如下：