Javascript d3.js是否有丢弃事件？_Javascript_D3.js_Drag And Drop

Javascript d3.js是否有丢弃事件？

javascript d3.js

Javascript d3.js是否有丢弃事件？,javascript,d3.js,drag-and-drop,Javascript,D3.js,Drag And Drop,我是否可以实现像本机javascript一样在drop event.datatransfer中获取拖动事件设置数据的方法？或者d3.js是另一种方法吗？任何建议都对我很有帮助，谢谢。我不能100%确定我是否理解这个问题，但在我看来，您需要d3.drag（）上的“结束”事件下面是一个在拖动事件中设置数据并在拖放事件中获取数据的示例。我想知道d3.js是否有相同的实现 <!DOCTYPE html> <html lang="en"> <head> <

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

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

下面是一个在拖动事件中设置数据并在拖放事件中获取数据的示例。我想知道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>


文件
#拖{
宽度：100px；
高度：100px；
背景色：浅绿色；
}
#下降{
宽度：100px；
高度：100px；
背景颜色：暗金色；
}
拖曳
滴
var darg=document.getElementById（'drag'）；
var drop=document.getElementById（'drop'）；
darg.addEventListener（'dragstart'，函数（e）{
e、 setData（'text'，'someting'）；
}，假）；
drop.addEventListener（'dragover'，函数（e）{
e、 预防默认值（）；
}，假）；
drop.addEventListener（'drop'，函数（e）{
log（例如dataTransfer.getData（'text'）；
}，假）；

不确定这是否有帮助，但通过在目标上附加鼠标悬停事件并验证全局状态（

isDropped

）来复制拖放事件，该全局状态在dragend上设置为

true

，在dragstart上设置为

false

）。在完成拖放操作后，在鼠标结束时将

isDropped

重置为

false

let isDropped=false；
让targetElement=document.getElementByID（'target'）；
让draggableElement=document.getElementByID（'draggable'）；
targetElement.addEventListener（'mouseover'，（）=>{
如果（已删除）{
log（'项目已被删除'）；
isDropped=假；
}
});
DragTableElement.addEventListener（'dragstart'，（）=>{
isDropped=假；
})
DragTableElement.addEventListener（'dragend'，（）=>{
isDropped=true；
})

另外…还遇到了另一个问题，项目在其他元素后面呈现，因此必须对HTML元素进行重新排序，以解决这个问题，因为svg没有直接的z索引。谢谢，我已经看到了，但我想在目标元素上触发drop事件，不是拖动元素上的“end”事件。我的方法是使用“end”事件的x和y位置来检测您正在拖放的元素？如果你这样做，你也可以添加代码来更改目标元素-即填充、笔划等。除非这是有用的：如果你使用x和y，你必须遍历所有元素。我认为答案是否定的，你不能用d3.drag在目标元素上触发拖放事件-你只能使用“end”和其他拖动功能，以检测您正在放置的位置，并以此方式触发事件。