[分享]css写一个拖拽选择

在Web开发中，我们经常需要实现拖拽选择这样的操作。利用CSS可以很方便地实现这一需求，并且代码简单易懂。具体实现方式如下：/ 首先定义一个选择器的状态，用来区分被选中的元素 / ::selectio...

在Web开发中，我们经常需要实现拖拽选择这样的操作。利用CSS可以很方便地实现这一需求，并且代码简单易懂。

具体实现方式如下：

/* 首先定义一个选择器的状态，用来区分被选中的元素 */
::selection {
  background-color: #FFA500;
}

/* 定义一个容器元素，在该元素中实现拖拽选择功能 */
.container {
  width: 300px;
  height: 300px;
  background-color: #EEE;
  cursor: crosshair;  /* 鼠标样式为十字架 */
}

/* 定义一个拖拽选择的样式 */
.selection {
  position: absolute;
  background-color: rgba(255, 165, 0, 0.2);
  border: 2px dashed #FFA500;
} 

以上代码描述了所需要的基本元素，下面是JS代码用来实现拖拽选择功能：

var container = document.querySelector('.container');
var selection = null;  // 记录拖拽选择的元素

container.addEventListener('mousedown', function(e) {
  // 创建一个拖拽选择的元素
  selection = document.createElement('div');
  selection.className = 'selection';
  selection.style.left = e.clientX + 'px';
  selection.style.top = e.clientY + 'px';
  container.appendChild(selection);
});

container.addEventListener('mousemove', function(e) {
  // 更新拖拽选择的位置和大小
  if (selection !== null) {
    var w = e.clientX - selection.offsetLeft;
    var h = e.clientY - selection.offsetTop;
    selection.style.width = w + 'px';
    selection.style.height = h + 'px';
  }
});

container.addEventListener('mouseup', function(e) {
  // 移除拖拽选择的元素
  if (selection !== null) {
    container.removeChild(selection);
    selection = null;
  }
}); 

通过以上代码，我们成功实现了一个简单的拖拽选择功能。当用户在容器元素中点击鼠标，就会创建一个拖拽选择的元素，然后当鼠标移动时，根据鼠标的位置更新该元素的位置和大小，当用户松开鼠标时，拖拽选择的元素就会被移除，从而实现了拖拽选择的功能。