拖动元素时将内部html拖放到另一个元素中

卡洛斯·丹尼尔(Carlos Daniel)

我有一个网格,其中有一个“start node.如何使它成为可拖动对象”。我不想移动HTML元素本身,因为它包含有关该节点的信息(位置,状态等)。我只想将其移动inner html到另一个HTML元素,这样HTML元素信息(例如xy坐标)就不会移动。

这是我要实现的目标:

在此处输入图片说明

我怎样才能达到那种效果?

我具有以下用于事件处理的功能:

const events = () => {
  for (let i = 0; i < 16; i++) {
    for (let j = 0; j < 45; j++) {
      const node = board[i][j];
      node.DOMElement.addEventListener("click", function () {
          // Click events ocurr here for a Node in a specific x and y position in the board
      });
    }
  }
};
卡洛斯·丹尼尔(Carlos Daniel)

下面的把戏!刚刚添加/删除了鼠标进入或离开图块时需要的东西。

let mouseDown: boolean = false;
let startNodeSelected: boolean = false;
let targetNodeSelected: boolean = false;

document.addEventListener("mousedown", () => {
  mouseDown = true;
});

document.addEventListener("mouseup", () => {
  mouseDown = false;
});

export const events = () => {
  for (let i = 0; i < 16; i++) {
    for (let j = 0; j < 45; j++) {
      const node: Node = board[i][j];
      const nodeElement: HTMLElement = board[i][j].DOMElement;

      nodeElement.addEventListener("mouseleave", () => {
        removeStartNodeOnDrag(node, nodeElement);
      });

      nodeElement.addEventListener("mouseenter", () => {
        addStartNodeOnDrag(node, nodeElement);
      });

      nodeElement.addEventListener("mouseleave", () => {
        removeTargetNodeOnDrag(node, nodeElement);
      });

      nodeElement.addEventListener("mouseenter", () => {
        addTargetNodeOnDrag(node, nodeElement);
      });
    }
  }
};

const removeStartNodeOnDrag = (node: Node, nodeElement: HTMLElement) => {
  if (node.type === "start" && mouseDown) {
    nodeElement.classList.remove("start");
    node.type = "empty";
    node.state = "unvisited";
    startNodeSelected = true;
  }
};

const addStartNodeOnDrag = (node: Node, nodeElement: HTMLElement) => {
  if (node.type === "empty" && mouseDown && startNodeSelected) {
    nodeElement.classList.add("start");
    node.type = "start";
    node.state = "visited";
    startNodeSelected = false;
  }
};

const removeTargetNodeOnDrag = (node: Node, nodeElement: HTMLElement) => {
  if (node.type === "target" && mouseDown) {
    nodeElement.classList.remove("target");
    node.type = "empty";
    targetNodeSelected = true;
  }
};

const addTargetNodeOnDrag = (node: Node, nodeElement: HTMLElement) => {
  if (node.type === "empty" && mouseDown && targetNodeSelected) {
    nodeElement.classList.add("target");
    node.type = "target";
    targetNodeSelected = false;
  }
};

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

javascript拖放-防止元素拖放到另一个droppable元素中

将一个画布内的对象拖放到html5中的另一个画布上

如何将数组中的特定元素放到另一个数组中

如何将div元素放到另一个div元素的底部

将 UIView 拖放到另一个(UIPanGesture 识别器)中

将元素添加到另一个div中时如何从HTML中删除元素

如何多次将同一元素拖放到JavaScript或jQuery中的另一个div框中?

jQuery将拖动的元素拖放到许多div中

将元素拖到另一个元素上时的 Html/JavaScript 事件

如何通过拖动JSXGraph中的另一个元素来拖动滑翔机

Xcode将ViewController从一个项目拖放到另一个项目

将ListView Item从一个listView拖放到另一个

如何让我的JQueryUI可拖动元素浮动到另一个溢出的元素中?

Perl将元素推入另一个数组内部的数组中

使用CSS / HTML将一个元素移到另一个元素之前

从dynamic.stage拖放到另一个

绘制箭头拖动开始一个元素拖动结束另一个

当元素被埋在另一个元素内部时,如何使:not选择器工作

jQuery拖放元素保留在列表中并创建另一个

将一个项目从一个recyclerview(列表视图)拖放到另一个recyclerview(listview)中

使用UIPanGuesture将UIView拖放到另一个UIView

将Listview项目拖放到另一个项目中

JavaFX将形状拖放到另一个形状上

Android 将 ImageView 拖放到另一个 ImageView

如何将ImageView拖放到另一个ImageView上

从敲除中的另一个observableArray内部的observableArray中移除一个元素

当另一个元素悬停在元素上时更改元素中的文本

从TableView拖放到Swift中的另一个视图

悬停元素时,使另一个元素出现