[分享]css制作一个可自行拖动的色子

现在，我们将学习如何使用CSS来制作一个可自行拖动的色子。首先，我们需要一个HTML文件和一个CSS文件。HTML文件应包含一个div元素，它将成为我们的色子。我们还需要一个button元素，它将用于...

现在，我们将学习如何使用CSS来制作一个可自行拖动的色子。首先，我们需要一个HTML文件和一个CSS文件。

HTML文件应包含一个div元素，它将成为我们的色子。我们还需要一个button元素，它将用于掷骰子。

<div id="dice"></div>
<button id="roll-btn">掷骰子</button> 

CSS文件应包含以下代码：

#dice {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
}

#roll-btn {
  margin-top: 20px;
}

#dice:hover {
  cursor: move;
} 

这将创建一个红色正方形，作为我们的色子。它将始终位于页面的中心，并在鼠标悬停在其上方时显示拖动光标。我们还添加了一个掷骰子的按钮。

现在，我们需要使用JavaScript来为色子添加拖动功能。为此，我们需要在JavaScript文件中添加以下代码：

const dice = document.getElementById('dice');

let isDragging = false;

dice.addEventListener('mousedown', function(event) {
  isDragging = true;
  let shiftX = event.clientX - dice.getBoundingClientRect().left;
  let shiftY = event.clientY - dice.getBoundingClientRect().top;

  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);

  function onMouseMove(event) {
    if (isDragging) {
      dice.style.left = event.pageX - shiftX + 'px';
      dice.style.top = event.pageY - shiftY + 'px';
    }
  }

  function onMouseUp() {
    isDragging = false;
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
  }
}); 

这将使我们的色子可以被鼠标拖动。鼠标点击色子并拖动时，鼠标的坐标将与色子的坐标匹配。然后，我们将添加鼠标移动事件和鼠标弹起事件。在鼠标移动事件中，我们检查当前是否正在拖动鼠标，并根据鼠标的移动来更新色子的位置。在鼠标弹起事件中，我们将isDragging变量重置为false，并删除事件监听器。

现在，我们的可自行拖动的色子就完成了！