我想将鼠标拖动到单元格上，然后单元格下的任何内容都会被选中。仅选择其下方的单元格。如果用户以之字形移动鼠标，则不会发生选择。
最佳答案
这是我在 Chrome 上测试的解决方案。我不确定您是否希望在开始拖动时选择第一个方 block ，因此我将其保留为未选择状态，以便在开始之字形之前不选择它。
<!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>
关于javascript - 我想将鼠标拖动到单元格上，单元格下的任何内容都会被选中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11033542/