如何使用 CSS 制作拖拽释放和拖放排序效果？

拖拽释放效果

要实现拖拽释放效果，需要用到HTML5中的drag和drop事件以及CSS中的:drag和:drop伪类。

具体实现步骤如下：

1. 给要拖拽的元素添加draggable属性并设置为true。
2. 监听dragstart和dragend事件，在dragstart事件中设置拖拽数据，在dragend事件中进行一些清理工作。
3. 监听dragover和drop事件，在dragover事件中阻止默认行为并设置放置目标为可放置状态，在drop事件中处理拖拽数据并进行一些清理工作。
4. 使用CSS中的:drag和:drop伪类分别设置拖拽和释放时的样式。

示例代码：

  
  .draggable {
    /* 设置为可拖拽元素 */
    draggable: true;
  }
.draggable:drag {
/ 拖拽时的样式 /
opacity: 0.5;
}
.droppable {
/ 设置为可放置元素 /
droppable: true;
}
.droppable:drop {
/ 放置时的样式 /
background-color: #ccc;
}
var draggable = document.querySelector('.draggable');
var droppable = document.querySelector('.droppable');
draggable.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text/plain', 'Hello, world!');
});
draggable.addEventListener('dragend', function(event) {
// 进行清理工作
});
droppable.addEventListener('dragover', function(event) {
event.preventDefault();
event.dataTransfer.dropEffect = 'move';
droppable.classList.add('droppable-active');
});
droppable.addEventListener('drop', function(event) {
event.preventDefault();
var data = event.dataTransfer.getData('text/plain');
console.log(data);
droppable.classList.remove('droppable-active');
// 进行清理工作
});

拖放排序效果

要实现拖放排序效果，需要用到HTML5中的drag和drop事件、CSS中的:drag和:drop伪类，以及JavaScript中的一些操作。

具体实现步骤如下：

1. 给要拖拽的元素添加draggable属性并设置为true。
2. 监听dragstart和dragend事件，在dragstart事件中设置拖拽数据，在dragend事件中进行一些清理工作。
3. 监听dragover和drop事件，在dragover事件中阻止默认行为并设置放置目标为可放置状态，在drop事件中进行排序操作并进行一些清理工作。
4. 使用CSS中的:drag和:drop伪类分别设置拖拽和释放时的样式。
5. 在JavaScript中实现排序操作，可以使用insertBefore等DOM操作。

示例代码：

  
  .draggable {
    /* 设置为可拖拽元素 */
    draggable: true;
  }
.draggable:drag {
/ 拖拽时的样式 /
opacity: 0.5;
}
.droppable {
/ 设置为可放置元素 /
droppable: true;
}
.droppable:drop {
/ 放置时的样式 /
background-color: #ccc;
}
var draggableList = document.querySelectorAll('.draggable');
var droppableList = document.querySelectorAll('.droppable');
var draggedItem = null;
for (var i = 0; i < draggableList.length; i++) {
var draggable = draggableList[i];
draggable.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text/plain', this.innerHTML);
  draggedItem = this;
  setTimeout(function() {
    draggedItem.style.display = 'none';
  }, 0);
});

draggable.addEventListener('dragend', function(event) {
  draggedItem.style.display = 'block';
  draggedItem = null;
  // 进行清理工作
});
}
for (var i = 0; i < droppableList.length; i++) {
var droppable = droppableList[i];
droppable.addEventListener('dragover', function(event) {
  event.preventDefault();
  event.dataTransfer.dropEffect = 'move';
  this.classList.add('droppable-active');
});

droppable.addEventListener('dragleave', function(event) {
  this.classList.remove('droppable-active');
});

droppable.addEventListener('drop', function(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData('text/plain');
  var newElement = document.createElement('div');
  newElement.classList.add('draggable');
  newElement.innerHTML = data;
  this.parentNode.insertBefore(newElement, this);
  this.classList.remove('droppable-active');
  // 进行清理工作
});
}