d3.js 是否有 drop 事件？答案

【问题标题】：Is there a drop event for d3.js?d3.js 是否有 drop 事件？
【发布时间】：2020-03-10 02:12:31
【问题描述】：

我是否可以像原生javascript一样实现在drop event.datatransfer中获取拖动事件设置数据的方法？或者 d3.js 是另一种方式吗？任何建议对我都有帮助，谢谢。

【问题讨论】：

【解决方案1】：

这是一个在拖动事件中设置数据并在放置事件中获取数据的示例。我想知道 d3.js 是否有相同的实现？

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      #drag{
        width: 100px;
        height:100px;
        background-color: aqua;
      }
      #drop{
        width: 100px;
        height:100px;
        background-color: darkgoldenrod;
      }
  </style>
</head>

<body>
  <div id="drag" draggable="true">drag</div>
  <div id="drop">drop</div>
</body>
<script>
  var darg = document.getElementById('drag');
  var drop = document.getElementById('drop');


  darg.addEventListener('dragstart', function (e) {
    e.dataTransfer.setData('text', "someting");
  }, false);

  drop.addEventListener('dragover', function (e) {
    e.preventDefault();
  }, false);

  drop.addEventListener('drop', function (e) {
    console.log(e.dataTransfer.getData('text'));
  }, false);
</script>

</html>

【讨论】：

【解决方案2】：

不确定这是否有帮助，但最终通过在目标上附加 mouseover 事件并验证设置为 true 的全局状态 (isDropped) 来复制 drop 事件>dragend 和 false 在 dragstart 上。在处理完放置动作后，在最后 mouseover 内将 isDropped 重置为 false。

let isDropped = false;
let targetElement = document.getElementByID('target');
let draggableElement = document.getElementByID('draggable');

targetElement.addEventListener('mouseover', () => {
    if(isDropped) {
        console.log('An item has been dropped');
        isDropped = false;
    }
});

draggableElement.addEventListener('dragstart', () => {
    isDropped = false;
})

draggableElement.addEventListener('dragend', () => {
    isDropped = true;
})

还...遇到了另一个问题，即项目呈现在其他元素之后，因此必须重新排序 HTML 元素来处理这个问题，因为 svg 没有直接的 z-Index ?

希望对你有所帮助?

【讨论】：

【解决方案3】：

您似乎可以轻松地利用“结束”事件作为“丢弃”行为：

var dragAndDrop = d3
  .drag()
  .subject(this)
  .on("start", function (d) {
    console.log("Triggered at the beginning");
  })
  .on("drag", function (d) {
    console.log("Triggered while dragging");
  })
  .on("end", function (d) {
    alert("drop");
  });

【讨论】：

sn-p 不工作。我会编辑来改变它，但我不知道我能改变什么。我想你的答案是好的，只需编辑它，以便后来的人有一个真实的证据证明它确实有效。谢谢

【解决方案4】：

我不是 100% 确定我理解了这个问题，但在我看来，您需要 d3.drag() 上的“结束”事件。

https://github.com/d3/d3-drag

【讨论】：

谢谢，我已经看到了，但是我想触发目标元素的 drop 事件，而不是拖动元素的 'end' 事件。
我的方法是使用 'end' 事件的 x 和 y 位置来检测您正在放置哪个元素？如果这样做，您还可以添加代码来更改目标元素 - 即填充、描边等。
除非有用：observablehq.com/@stwind/drag-and-drop
如果使用x和y，则必须遍历所有元素
所以我认为答案是否定的，你不能用 d3.drag 在目标元素上触发 drop 事件——你只能使用“end”和其他拖动功能来检测你在哪里以这种方式删除并触发事件。