javascript d3.js是否有删除事件？

wkyowqbh 于 2023-01-24 发布在 Java

关注(0)|答案(4)|浏览(138)

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

JavaScript

来源：https://stackoverflow.com/questions/60610686/is-there-a-drop-event-for-d3-js

4条答案

按热度按时间

hxzsmxv21#

这是一个在拖拽事件中设置数据并在拖放事件中获取数据的例子，我想知道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>

赞(0）回复(0）举报 2023-01-24

yptwkmov2#

不确定这是否有帮助，但通过在目标上附加 mouseover 事件并验证全局状态（isDropped）（在 dragend 上设置为true，在 dragstart 上设置为false），最终复制了放置事件。此外，在处理完放置操作后，在 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索引😢
不管怎样，希望能有所帮助😄

赞(0）回复(0）举报 2023-01-24

k5hmc34c3#

您可以在引用对象事件上设置数据（通过this._current），然后在其他相关对象事件上获取数据：

const clickElementEventHandler = function (event) {
this._current = event;

this._current.initPosition={
 x:d3.select(this).attr("x"),
 y:d3.select(this).attr("y")};
 d3.select(this).attr("fill", "black");

};

x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-01-24

ufj5ltwl4#

我不是100%确定我理解了这个问题，但在我看来，您需要d3.drag（）上的“end”事件。
https://github.com/d3/d3-drag

赞(0）回复(0）举报 2023-01-24