要使用 CSS 实现鼠标拖拽效果，需要使用 CSS3 中的拖放 API。这个 API 包括了一系列事件和属性，可以让我们轻松地实现拖拽效果。
首先，需要设置元素的 draggable 属性为 true，以使其可拖拽。然后，需要监听 dragstart、dragover、drop 和 dragend 这些事件，分别表示拖拽开始、拖拽过程中、放置和拖拽结束时的行为。
在 dragstart 事件中，需要使用 dataTransfer.setData 方法设置拖拽的数据类型和数据内容。在 dragover 事件中，需要使用 event.preventDefault() 方法来防止浏览器默认的行为，以便能够成功放置。在 drop 事件中，可以使用 event.dataTransfer.getData 方法获取拖拽的数据内容，并进行相应的处理。在 dragend 事件中，可以进行一些清理工作，如移除拖拽时设置的样式。
下面是一个简单的实现示例：
.draggable {
width: 100px;
height: 100px;
background-color: #ccc;
cursor: move;
}
.draggable:hover {
opacity: 0.5;
}<div class="draggable" draggable="true">拖拽我</div>const draggable = document.querySelector('.draggable');
draggable.addEventListener('dragstart', (event) => {
event.dataTransfer.setData('text/plain', '拖拽的内容');
});
draggable.addEventListener('dragover', (event) => {
event.preventDefault();
});
draggable.addEventListener('drop', (event) => {
const data = event.dataTransfer.getData('text/plain');
console.log(data);
});
draggable.addEventListener('dragend', (event) => {
draggable.style.opacity = 1;
});在以上示例中，我们使用了 .draggable 类来设置元素的样式，并将 draggable 属性设置为 true。在 dragstart 事件中，我们使用了 setData 方法来设置拖拽的数据类型为 text/plain，并将数据内容设置为“拖拽的内容”。在 dragover 事件中，我们使用了 preventDefault 方法来阻止浏览器默认的行为。在 drop 事件中，我们使用了 getData 方法来获取拖拽的数据内容，并在控制台输出。在 dragend 事件中，我们将元素的透明度重置为 1。
需要注意的是，拖放 API 在不同浏览器中的支持程度不同，可能会存在兼容性问题。