Topic: Two trees
Is it possible to create two trees and organize dnd between them? or move node from 1 tree to another saving tree structure.
Re: Two trees
I had a recent project that required the ability to drag and drop between multiple trees as well as from a tree to a map. I started with Miftree 1.0r19 and hacked it enough to allow dnd between trees. The code is not very elegant, but it works for my purposes. Here's a demo: http://www.juniorbug.com/treedemo/
Last edited by jgcrowder (2008-08-18 15:30:01)
Re: Two trees
2 jgcrowder: there is small buggy in demo, because u use node height 18:
tree1 = new Mif.Tree({
...
height: 18//node height
});but realy it's 20 in css:
.mif-tree-wrapper{
...
line-height:20px;/******Tree node height******/
...
}Re: Two trees
moro wrote:
2 jgcrowder: there is small buggy in demo, because u use node height 18:
tree1 = new Mif.Tree({ ... height: 18//node height });but realy it's 20 in css:
.mif-tree-wrapper{ ... line-height:20px;/******Tree node height******/ ... }
Fixed.
Re: Two trees
jgcrowder wrote:
I had a recent project that required the ability to drag and drop between multiple trees as well as from a tree to a map. I started with Miftree 1.0r19 and hacked it enough to allow dnd between trees. The code is not very elegant, but it works for my purposes. Here's a demo: http://www.juniorbug.com/treedemo/
It's wonderful! This feature is exactly what a need. Could you please share it's realization?
Re: Two trees
Here's a simpler demo involving only trees: http://www.juniorbug.com/treedemo/simple.html. You should view the page source to gain a better feel for how things work. Also, keep in mind that presently my mods only "copy" nodes from tree to tree... they don't move.
Basically, the only thing you need to do different from normal mif.tree stuff is:
- include my mif.tree-dndmods.js file *after* the standard mif.tree js library. My "mods" file only includes the portions of the library I had to modify to get the multi-tree dnd working, so it's important you include the full mif.tree library as well.
- Declare a global variable called "draggedNode".
- For each tree, set the "draggedNode" variable to "this" when the "onStart" event fires.
- For each tree, set the "draggedNode" variable to "null" when the "onComplete" event fires.
Re: Two trees
jgcrowder wrote:
Here's a simpler demo involving only trees: http://www.juniorbug.com/treedemo/simple.html. You should view the page source to gain a better feel for how things work. Also, keep in mind that presently my mods only "copy" nodes from tree to tree... they don't move.
Basically, the only thing you need to do different from normal mif.tree stuff is:
- include my mif.tree-dndmods.js file *after* the standard mif.tree js library. My "mods" file only includes the portions of the library I had to modify to get the multi-tree dnd working, so it's important you include the full mif.tree library as well.
- Declare a global variable called "draggedNode".
- For each tree, set the "draggedNode" variable to "this" when the "onStart" event fires.
- For each tree, set the "draggedNode" variable to "null" when the "onComplete" event fires.
Thank you!
I'll try to make nodes move relaying on your example. I guess I only have to make some changes in your "mods" file?
Re: Two trees
Yes, you'll have to make some changes to the "mods" file, but you'll probably have to add code that alters the "inject" method (and possibly others), which is the method that is called when moving nodes in the tree. If I get some time, I'll take a look into it..
I hope moro implements dnd between trees in the near future because I'd hate to think lots of users end up using my non-standard code.
Re: Two trees
d'n'd between trees implemented rev33.
Re: Two trees
moro wrote:
d'n'd between trees implemented rev33.
Thank you for your great work!
Re: Two trees
There seems to be a bug with the drag and drop examples in google code. If you look at either the "dnd" or the "draganddrop" demos, whenever you drag a node to another location, it works just fine the first time. The second time you click a node and start to drag it, a whole bunch of "<span class="mif-tree-ghost mif-tree-ghost-notAllowed" style="position: absolute;">" tags are created and aren't destroyed when you stop dragging.. then you end up with a ghost image on the screen that doesn't disappear.
Re: Two trees
jgcrowder wrote:
There seems to be a bug with the drag and drop examples in google code. If you look at either the "dnd" or the "draganddrop" demos, whenever you drag a node to another location, it works just fine the first time. The second time you click a node and start to drag it, a whole bunch of "<span class="mif-tree-ghost mif-tree-ghost-notAllowed" style="position: absolute;">" tags are created and aren't destroyed when you stop dragging.. then you end up with a ghost image on the screen that doesn't disappear.
fixed rev38, thx for report.