Question

我正在学习JavaScript，并且在使用Literal对象时遇到一些麻烦，我尝试用布尔值将HTML元素存储在其中，以检查我的项目是否被“单击”，这是我的代码：

function deplacer(argument) {
	for(e in actif){
		if(actif[e] == true){
			e.style.top = argument.clientY + "px";
			e.style.left = argument.clientX + "px";
		}
	}
}

function activerDeplacement(arg) {
	actif[arg.target] = true;
}

document.addEventListener("mousemove", deplacer);

var elements = document.querySelectorAll(".draggableBox");
var actif = {};

for (var i = 0, taille = elements.length; i < taille; ++i){
	actif[elements[i]] = false;
	elements[i].addEventListener("mousedown", activerDeplacement);
}

.draggableBox {
    position: absolute;
    width: 80px; height: 60px;
    padding-top: 10px;
    text-align: center;
    font-size: 40px;
    background-color: #222;
    color: #CCC;
    cursor: move;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Page drag and drop</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

	<div class="draggableBox">1</div>
	<div class="draggableBox">2</div>
	<div class="draggableBox">3</div>

<script type="text/javascript" src="script.js"></script>
</body>
</html>

但是当我这样做时，当我用于in时只有一个元素，并且它具有未定义的类型。

我真的迷路了，如果您能帮助我，那就太酷了！预先谢谢您！

edit：我发现了问题！我无法将引用存储为文字对象中的元素，因此为了解决我的问题，我这样做了：

function deplacer(argument) {
    if(actif){
        actif.style.top = argument.clientY +"px";
        actif.style.left = argument.clientX + "px";
    }
}

function activerDeplacement(arg) {
    actif = arg.target;
}

function desactiverDeplacement(arg) {
    actif = null;
}

document.addEventListener("mousemove", deplacer);

var elements = document.querySelectorAll(".draggableBox");
var actif = null;

for (var i = 0, taille = elements.length; i < taille; ++i){
    elements[i].addEventListener("mousedown", activerDeplacement);
    elements[i].addEventListener("mouseup", desactiverDeplacement);
}

现在一切正常！

Answer 1

{actif[elements[i]] = false;不会保存html元素，它会将对象引用转换为字符串[object HTMLDivElement]

console.log(String(document.querySelector('div')))
console.log(String(document.querySelector('div')).style)

<div></div>

const actif = {};
const elements = document.querySelectorAll(".draggableBox");

document.addEventListener("mousemove", deplacer);

elements.forEach(init)

function init(element, index) {
  actif[index] = {
    active: false,
    element
  };
  element.addEventListener("mousedown", activerDeplacement);
  element.addEventListener("mouseup", e => activerDeplacement(e, false));
}

function deplacer(argument) {
  Object
    .values(actif)
    .forEach(e => assignXY(argument, e))
}

function assignXY(argument, { active, element }) {
  if (active) {
    element.style.top = argument.clientY + "px";
    element.style.left = argument.clientX + "px";
  }
}

function activerDeplacement(arg, active = true) {
  Object.assign(getFromEvent(arg), { active });
}

function getFromEvent({ target }) {
  return actif[Array.from(elements).indexOf(target)];
}

.draggableBox {
  position: absolute;
  width: 80px;
  height: 60px;
  padding-top: 10px;
  text-align: center;
  font-size: 40px;
  background-color: #222;
  color: #CCC;
  cursor: move;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Page drag and drop</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <div class="draggableBox">1</div>
  <div class="draggableBox">2</div>
  <div class="draggableBox">3</div>

  <script type="text/javascript" src="script.js"></script>
</body>

</html>

JavaScript中的对象文字问题

1 个答案: