在 mousemove 事件期间无法设置元素样式顶部或左侧

Question

TLDR：这是一个 JS Fiddle https://jsfiddle.net/qn8jhsaf/10/

我正在尝试使用鼠标事件创建一个简单的拖放 UI，因为我不喜欢任何可用于我正在使用的框架的库。 虽然我已经连接了所有事件并获得了我想要的应用程序端行为，但动画 div 移动并没有按照我的预期工作。

我正在尝试使用 vanilla JS 将克隆的 div 插入到 dom 中，绝对是 position 它，然后在鼠标移动时使用 tranform: translate 移动它。

所以在 onMouseDown 中，我正在这样做：

const onMouseDown = (e) => {
  isDragging = true
  const rect = element.getBoundingClientRect()
  let node = element.cloneNode(true)
  node.style.position = 'absolute'
  node.style.zIndex = 1000
  node.style.left = rect.x
  node.style.top = rect.y
  console.log(rect.x)
  console.log(node.style.left)
  draggableNode = node
  document.body.append(node)
}

奇怪的部分发生在我调用node.style.left =时。 它不会抛出错误或任何东西，但该值仍然是顽固的空（ "" ）并且它不会被转换为克隆 div 的样式属性。 据我从文档中可以看出，这是受支持的。 我不确定还能尝试什么。

Answer 1

左上角 styles 需要是字符串。

  node.style.left = `${rect.x}px`
  node.style.top  = `4{rect.y}px`

FWIW，我发誓我在某个时候尝试过，但是¯\_(ツ)_/¯