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

wkyowqbh  于 2023-01-24  发布在  Java
关注(0)|答案(4)|浏览(147)

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

hxzsmxv2

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>
yptwkmov

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索引😢
不管怎样,希望能有所帮助😄

k5hmc34c

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

ufj5ltwl

ufj5ltwl4#

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

相关问题