Trascina e rilascia da / per Dynatree
-
12-12-2019 - |
Domanda
Sto cercando di trascinare i dati da un dynatree e lasciarlo in un altro Dynatree.Nella documentazione un esempio mostra come spostare un nodo nello stesso albero.È possibile spostare un nodo e metterlo nel secondo Dynatree con tutta la sua opzione ??
Primo albero ha:
$("#Tree1).dynatree({
dnd: {
onDragStart: function (node) {
logMsg("tree.onDragStart(%o)", node);
return true;
},
});
.
E il secondo albero:
$("#Tree2").dynatree({
dnd :{
onDrop: function (node, sourceNode, hitMode, ui, draggable) {
logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
sourceNode.move(node, hitMode);
},
onDragEnter: function (node, sourceNode) {
logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
return true;
}
}
});
.
Grazie in anticipo
Soluzione
AFAIK, Attualmente DynaTree non supporta il nodo muove tra diversi alberi.Tuttavia, è possibile copiare il nodo da Tree1 e aggiungere il nodo copiato su Tree2.Successivamente, è possibile eliminare il nodo in Tree1.Con questo approccio, puoi imitare il comportamento del muovimento del nodo tra gli alberi.
Quindi invece di usare sourcenode.move (nodo, hitmode), puoi usare questo:
var copyNode = sourceNode.toDict(true, function (dict) {
delete dict.key;
});
node.addChild(copyNode);
.
Spero che questo aiuto.
Altri suggerimenti
Puoi farlo, in realtà.Posiziona semplicemente ogni dynatree in div e rendi quel div droppable.Il DOM può analizzare l'oggetto del nodo Dynatree dal droppable, come è ciò che è ciò che Dynatree si attacca all'evento.
Puoi vedere un campione di lavoro qui .
dynatree 1 (trascinabile)
$("#tree").dynatree({
dnd: {
revert: false, // true: slide helper back to source if drop is rejected
onDragStart: function(node) {
},
onDragStop: function(node) {
}
},
cookieId:"dynatree-cb1",
idPrefix:"dynatree-cb1-"
});
.
Dynatree 2 (Droppable)
$("#tree2").dynatree({
dnd: {
autoExpandMS: 1000,
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
onDragEnter: function(node, sourceNode) {
if(node.data.isFolder){
return false;
}
return true;
// return "over";
},
onDragOver: function(node, sourceNode, hitMode) {
},
onDrop: function(node, sourceNode, hitMode, ui, draggable) {
logMsg("tree.onDrop(%o, %o)", node, sourceNode);
var copynode;
if(sourceNode) {
copynode = sourceNode.toDict(true, function(dict){
dict.title = "Copy of " + dict.title;
delete dict.key; // Remove key, so a new one will be created
});
}else{
copynode = {title: "This node was dropped here (" + ui.helper + ")."};
}
if(hitMode == "over"){
// Append as child node
node.addChild(copynode);
// expand the drop target
node.expand(true);
}else if(hitMode == "before"){
// Add before this, i.e. as child of current parent
node.parent.addChild(copynode, node);
}else if(hitMode == "after"){
// Add after this, i.e. as child of current parent
node.parent.addChild(copynode, node.getNextSibling());
}
},
onDragLeave: function(node, sourceNode) {
/** Always called if onDragEnter was called.
*/
logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
}
},
cookieId:"dynatree-cb2",
idPrefix:"dynatree-cb2-"
});
.
Prova questo codice funziona.Ho fatto lo stesso prima.