问我想将鼠标拖到单元格上，无论单元格下的内容是什么，都会选中javascript
EN

Stack Overflow用户

提问于 2012-06-14 20:57:56

回答 1查看 147关注 0票数 1

我想把鼠标拖到单元格上，单元格下面的任何内容都会被选中。只有其下面的单元格才会被选中。如果用户以之字形方式移动鼠标，则不会发生任何选择。

javascript

mouseevent

回答 1

Stack Overflow用户

发布于 2015-05-24 21:49:56

这是我在Chrome上测试的解决方案。我不确定您是否希望在开始拖动时选中第一个正方形，因此我将其保留为未选中状态，以便在您开始进行Z字形拖动之前不选中它。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
td{padding: 100px;}
.selected{background-color: #f55;}
.deselected{background-color: #faa;}
</style>
<script>
var dragging = false
var reference
addEventListener("load", function(){
  var squares = document.querySelectorAll("td")
  for(var i = 0; i < squares.length; ++i){
    squares[i].draggable = true
    squares[i].className = "deselected"
    squares[i].addEventListener("dragstart", function(){
      reference = this
      dragging = true
    })
    squares[i].addEventListener("drop", function(){dragging = false})
    squares[i].addEventListener("dragenter", toggle)
  }
})
function toggle(){
  if(!dragging) return
  if(this == reference) return
  var rect = reference.getBoundingClientRect()
  if(this.getBoundingClientRect().top < rect.top){
    dragging = false
    return
  }
  if(this.getBoundingClientRect().left != rect.left){
    dragging = false
    return
  }
  if(this.className == "selected"){
    this.className = "deselected"
  }
  else{
    this.className = "selected"
  }
}
</script>
</head>
<body>
<table>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11033542

复制

相似问题

问我想将鼠标拖到单元格上，无论单元格下的内容是什么，都会选中javascript
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我想将鼠标拖到单元格上，无论单元格下的内容是什么，都会选中javascriptEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我想将鼠标拖到单元格上，无论单元格下的内容是什么，都会选中javascript
EN