Drag n drop multiple Nodes and folder

[mafar]

Hello,
How can I activate dragging of multiple nodes. was it not supposed to be a feature in fancytree ?
This feature is provided in Jstree and works well within and between different trees.
Am I missing example somewhere ?

[mar10]

This is no official 'feature' yet, but you could already call tree.getSelectedNodes() in the drop handler and then move, copy, or whatever these nodes to the target, I guess.
The dragging helper image would still show a single node though.

[idoyana]

+1

[mafar]

Hi,
has this been implemented ?

[idoyana]

Hi Martin,
it would be wonderful If could implement a multidrag
this is a very important feature that could help a lot

[mar10]

@djangosdk no, it hasn't yet.
I am currently experimenting wit the issue tracker. Don't like the 'someday maybe' issues to clutter the todo list, so I tagged planned features 'backlog',moved them to the respective milestone and closed them to get them out of sight.
But I will probably re-open them again soon...

[mafar]

Dear @mar10
This features has been waiting for too long :)
Multiple nodes drag n drop will be much faster than tree.getSelectedNodes() and then move them.

[kv92]

+1
Would be great to have this feature available

[mar10]

There is no built-in 'multiDnd' option, because the potential use cases are too diverse.
But I started a demo implementation here:
http://wwwendt.de/tech/fancytree/demo/#sample-multi-dnd.html

[ryanlin1986]

Is it possible to have multi-dnd without checkbox? I'd like to select multiple tree nodes by using ctrl key, it feels more user friendly Thanks.

[mar10]

Sure, the sample just looks at the 'selected' state, which can be set using node.setSelected()

[activestylus]

Wow, this is the most thorough demo I've seen for multi-select nested tree. Very nice work, especially on the drag cursor which shows how many items are selected. Brilliant!

Two questions:

1. Right now you can drag and nest anything, but what if I am emulating a file system and I only want folders to accept dropped items?
2. Is it possible to link multiple lists so that you can drag from one to another?

[activestylus]

Made a bit of progress here:

dragDrop: function(node, data) {
    ...
    var canDrop = node.span.classList.value.includes('fancytree-folder');
    if (canDrop) {o.moveTo(node, data.hitMode);}

Now I can only drag inside folders (hooray!). Currently trying to figure out how to get that little indicator (drop vs non-drop) to cooperate

[activestylus]

Looks like I was able to figure this out. Just needed to define my own logic of what can be accepted

Patched dnd.js as follows and my first task is done:

var acceptable = accept === true && $target.hasClass('fancytree-folder')

instData.$dropMarker
  .toggleClass(classDropAfter, hitMode === "after")
  .toggleClass(classDropOver, hitMode === "over")
  .toggleClass(classDropBefore, hitMode === "before")
  .position($.ui.fancytree.fixPositionOptions({
    my: "left" + offsetString(markerOffsetX) + " center",
    at: "left " + markerAt,
    of: $targetTitle
    }));
if (acceptable) { instData.$dropMarker.show(); }
if( $source ){
  $source
    .toggleClass(classDropAccept, acceptable === true)
    .toggleClass(classDropReject, acceptable === false);
}
$target
  .toggleClass(classDropTarget, (hitMode === "after" || hitMode === "before" || hitMode === "over") && acceptable)
  .toggleClass(classDropAfter, hitMode === "after")
  .toggleClass(classDropBefore, hitMode === "before")
  .toggleClass(classDropAccept, acceptable === true)
  .toggleClass(classDropReject, acceptable === false);

helper
  .toggleClass(classDropAccept, acceptable === true)
  .toggleClass(classDropReject, acceptable === false);

[activestylus]

So I only have one pending question here: Linking multiple lists. I need my second list to be sortable and one thing I do notice in the original example you provided is that I am unable to drag items into custom order, even though I get the indicator that it's possible. How do I fix this?

[mar10]

Hi,
I would recommend against modifiying the plugin code.

Now I can only drag inside folders (hooray!). Currently trying to figure out how to get that little indicator (drop vs non-drop) to cooperate

Use the API instead:

dragStart: function(node, data) {
    // This function MUST be defined to enable dragging for the tree.
    // Return false to cancel dragging of node.
    return node.isFolder();
},

Basically you can control drag/drop completely by implementing the dragXxx callcacks. See here for details:
https://github.com/mar10/fancytree/wiki/ExtDnd

(sample-multi-dnd.html only demos how to tweak the helper image, and use all selected nodes instead of the currently active one.)

[activestylus]

That is very helpful. Thanks a lot!

[Bobavince]

for reference (as google search is leading here), this is the tutorial to follow now : https://github.com/mar10/fancytree/wiki/ExtDnd5