javascript - 为什么追加不起作用？ this.append 不是一个函数

Question

这个问题已经有答案了:

Arrow Functions and This [duplicate] (5 个回答)

已关闭 3 年前。

当我将绿色框拖放到另一个列中时，出现此错误:

this.append is not a function

为什么？

https://jsfiddle.net/gdxwks0t/1/

const cols = document.getElementsByClassName('col')
const item = document.querySelector('.item')

for (const col of cols) {
  col.addEventListener("dragover", (e) => {
    e.preventDefault()
  })
  col.addEventListener("drop", () => {
    alert(this)
    this.append(item)
  })
}

<div class="col">
  <div draggable="true" class="item"></div>
</div>
<div class="col"></div>
<div class="col"></div>

Answer 1

Arrow (=>) function expressions

An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords.

改用普通函数语法。

const cols = document.getElementsByClassName('col')
const item = document.querySelector('.item')

for (const col of cols) {
  col.addEventListener("dragover", (e) => {
    e.preventDefault()
  })
  col.addEventListener("drop", function() {
    alert(this)
    this.append(item)
  })
}

body {
  background: #ccc;
}
.item {
  background: #6dc06d;
  width: 50px;
  height: 50px;
  margin: 10px;
}
.col {
  float: left;
  width: 70px;
  height: 70px;
  background: white;
  margin: 10px;
}

<div class="col">
  <div draggable="true" class="item"></div>
</div>
<div class="col"></div>
<div class="col"></div>