Change drag-drop UI and behavior

[kcsujeet]

Hi. This library is exactly what I was looking for. It meets all my needs for a tree lib except for the drag-drop UI customization. I want something like shown in the video. Is it possible to do that?

Screen.Recording.2024-01-29.at.9.09.52.AM.mov

[phphe]

which part?

[kcsujeet]

@phphe the blue highlights when dragging over or in between nodes. Currently, the node being dragged pushes away other nodes. Is there any way I can customize this behavior?

[phphe]

update to 2.8.1. use ondragstart hook. use setDragImage method of HTML5 Drag and Drop API DragEvent. Create a custom div as the image.

<template>
  <Tree :ondragstart="customDragImage" />
</template>

<script>
export {
  // ...
  methods: {
    // event: HTML5 Drag and Drop API DragEvent
    customDragImage(event) {
      var div = document.createElement("div");
      div.style.backgroundColor = "red";
      div.style.color = "white";
      div.innerText = "This is a div with blue background and white text.";
      document.body.appendChild(div);
      event.dataTransfer.setDragImage(div, 10, 10)
      setTimeout(() => {
        div.remove()
      }, 100)
    },
  }
}
</script>

[kcsujeet]

@phphe the solution works great. but it's not quite what i'm looking for. When I'm dragging a node, other nodes are getting pushed away. I'm looking for an alternative to this library which is no longer being maintained. https://github.com/holiber/sl-vue-tree .... Everything seems to be working great. I just wasn't able to customize this drag-drop ui.

The video shows comparisons of the two:

Screen.Recording.2024-01-30.at.9.08.48.AM.mov

Essentially three things:

1. Dragging a node doesn't push away other nodes
2. When dragging over a node, it's borders are blue
3. On dropping on the node, the dragged node becomes it's child (Currently i have to indent my mouse a little bit to the right to make a node child of another node)

[phphe]

1. The blue box is to show droppable place, you can set its height to 1 by css, follow is its html and css.

<div class="tree-node drag-placeholder-wrapper" vt-index="15" style="padding-left: 0px;">
  <div class="tree-node-inner">
    <div class="drag-placeholder he-tree-drag-placeholder"></div>
  </div>
</div>

.he-tree-drag-placeholder {
    background: #ddf2f9;
    border: 1px dashed #00d9ff;
    height: 22px;
    width: 100%;
}

2. when drag over node, you can use css 'hover' or js mouseenter event to highlight the node.
3. use prop eachdroppable to control node's droppable. https://hetree.phphe.com/v2/api#eachdroppable

[kcsujeet]

@phphe the hover css doesn't seem to be working. it's stuck in the node being currently dragged. is there any other class i can target?

Screen.Recording.2024-01-31.at.9.50.40.AM.mov

[phphe]

listen dragenter, dragleave event in your each node