英文:
How to select multiple DIVs by mousedown>mousemove>mouseup (pure JS)
问题
我试图在单击空白点并移动指针时选择元素。
在这个示例中，我期望选择两个元素：
我尝试了范围和选择，但结果不正确。
const mainDiv = document.createElement("div");
mainDiv.style.width = "500px";
mainDiv.style.height = "500px";
document.body.appendChild(mainDiv);
const div1 = document.createElement("div");
div1.style.position = "absolute";
div1.style.top = `${50}px`;
div1.style.left = `${50}px`;
div1.style.width = "100px";
div1.style.height = "100px";
div1.style.background = "red";
mainDiv.appendChild(div1);
const div2 = document.createElement("div");
div2.style.top = `${250}px`;
div2.style.left = `${250}px`;
div2.style.width = "100px";
div2.style.height = "100px";
div2.style.background = "green";
div2.style.position = "absolute";
mainDiv.appendChild(div2);
mainDiv.onmousedown = function(event) {
function onMouseMove(event) {
// 将 div 添加到选择中
}
mainDiv.addEventListener('mousemove', onMouseMove);
mainDiv.onmouseup = function() {
console.log("已选择的 div 元素")
}
}
英文:
I'm trying to make a selection of elements when I click on empty point and move pointer.
In this example I'm expecting to get selection of two elements:
I've tried range and selection, but not with the proper result.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const mainDiv = document.createElement("div");
mainDiv.style.width = "500px";
mainDiv.style.height = "500px";
document.body.appendChild(mainDiv);
const div1 = document.createElement("div");
div1.style.position = "absolute";
div1.style.top = `px`;
div1.style.left = `px`;
div1.style.width = "100px";
div1.style.height = "100px";
div1.style.background = "red";
mainDiv.appendChild(div1);
const div2 = document.createElement("div");
div2.style.top = `${250}px`;
div2.style.left = `${250}px`;
div2.style.width = "100px";
div2.style.height = "100px";
div2.style.background = "green";
div2.style.position = "absolute";
mainDiv.appendChild(div2);
mainDiv.onmousedown = function(event) {
function onMouseMove(event) {
//add divs to selection
}
mainDiv.addEventListener('mousemove', onMouseMove);
mainDiv.onmouseup = function() {
console.log("selected divs")
}
}
<!-- end snippet -->
答案1
得分: 0
你可以通过保持一个选定项目的数组，在鼠标移动到项目上并且鼠标被按下时将项目推送到数组中来解决这个问题。
const mainDiv = document.createElement("div");
mainDiv.style.width = "500px";
mainDiv.style.height = "500px";
document.body.appendChild(mainDiv);
const div1 = document.createElement("div");
div1.style.position = "absolute";
div1.style.top = `${50}px`;
div1.style.left = `${50}px`;
div1.style.width = "100px";
div1.style.height = "100px";
div1.style.background = "red";
mainDiv.appendChild(div1);
const div2 = document.createElement("div");
div2.style.top = `${250}px`;
div2.style.left = `${250}px`;
div2.style.width = "100px";
div2.style.height = "100px";
div2.style.background = "green";
div2.style.position = "absolute";
mainDiv.appendChild(div2);
(() => {
let selection = [];
let selecting = false;
function beginSelection(e) {
selection = [];
selecting = true;
checkSelection(e);
}
function mouseMove(e) {
checkSelection(e);
}
function mouseUp(e) {
selecting = false;
if (selection.length) {
console.log("selection: ", selection); // 在重置之前访问选择
selection = [];
} else {
// 没有选择
}
}
function checkSelection(e) {
if (!selecting) {
return; // 忽略
}
const selected = e.target.parentNode === mainDiv && e.target;
if (selected && !selection.includes(selected)) {
selection.push(selected);
}
}
mainDiv.addEventListener("mousedown", beginSelection);
mainDiv.addEventListener("mousemove", mouseMove);
window.addEventListener("mouseup", mouseUp);
})();
请注意，这是你提供的代码的翻译。
英文:
You can solve this by keeping an array of selected items and pushing items to it when the mouse moves over the items if the mouse is depressed.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const mainDiv = document.createElement("div");
mainDiv.style.width = "500px";
mainDiv.style.height = "500px";
document.body.appendChild(mainDiv);
const div1 = document.createElement("div");
div1.style.position = "absolute";
div1.style.top = `${50}px`;
div1.style.left = `${50}px`;
div1.style.width = "100px";
div1.style.height = "100px";
div1.style.background = "red";
mainDiv.appendChild(div1);
const div2 = document.createElement("div");
div2.style.top = `${250}px`;
div2.style.left = `${250}px`;
div2.style.width = "100px";
div2.style.height = "100px";
div2.style.background = "green";
div2.style.position = "absolute";
mainDiv.appendChild(div2);
!(() => {
let selection = [];
let selecting = false;
function beginSelection(e) {
selection = [];
selecting = true;
checkSelection(e);
}
function mouseMove(e) {
checkSelection(e);
}
function mouseUp(e) {
selecting = false;
if (selection.length) {
console.log("selection: ", selection); // access selection before reset
selection = [];
} else {
// no selection
}
}
function checkSelection(e) {
if (!selecting) {
return; // ignore
}
const selected = e.target.parentNode === mainDiv && e.target;
if (selected && !selection.includes(selected)) {
selection.push(selected);
}
}
mainDiv.addEventListener("mousedown", beginSelection);
mainDiv.addEventListener("mousemove", mouseMove);
window.addEventListener("mouseup", mouseUp);
})();
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论