Laurent

Navigation

Skip navigation.

Search

Site navigation

Email conversation

FromLaurent
ToMe
Subjecttree
Date13 June 2005 16:55
Hello,

I just found your page with the *neat* javascripts. I'm impressed,
especially by the dragable layer script. I'm a php programmer, and I'm not
that much into javascript. So here's my problem : I want to create a
"dynamic" tree which has elements you can move around. So your javascript
perfectly fits this need. What I would like to know is if there is a
possibility to attach a kind of arrow on each box, in order to link them
with a top-level node?

thanks for your help,

laurent
FromMe
ToLaurent
SubjectRe: tree
Date14 June 2005 09:39
Laurent,

> What I would like to know is if there is a possibility to attach a kind
> of arrow on each box, in order to link them with a top-level node?

I am trying to work out exactly what you mean here. Are you saying that you
want a tree structure - like a nested list? where you can see the lines that
show where the branches are (like on
http://www.howtocreate.co.uk/tutorials/jsexamples/collapseList.html )? and
you want to be able to drag branches up and down to change their order?

If so, that is very hard. certainly a huge change to my script. I could do
it a lot more easily without drag/drop, just using buttons to say "up"
"down" "left" "right" to step through the tree...


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
FromLaurent
ToMe
SubjectRe: tree
Date14 June 2005 09:54
AttachmentScreenshot of some randomly placed dragable layers
Hi Mark,

not quite. If you look at the screenshot, you'll see a couple of dragable
layers, generated with your script. Now I'd like to attach an arrow on each
box and let them point to another box - some kind of organizational
structure. The items do not have to change positions (level), but you should
only be able to rearrange them (as it is for now).


Laurent
FromMe
ToLaurent
SubjectRe: tree
Date15 June 2005 22:26
Laurent,

> Now I'd like to attach an arrow on each box and let them point to another
> box

ok, that makes it even harder :)

vector lines or vectored arrows are extremely hard to do, since HTML and CSS
do not provide a way to do this (there is SVG or VML, but neither of these
are cross browser, and are unreliable as well).

If you want to generate lines, you would need to use multiple small divs
that appear to make a dotted line using their background colour. I have used
this technique on:
http://www.howtocreate.co.uk/tutorials/jsexamples/anclock.html


I'm afraid I do not know of any easier way.


Tarquin
FromLaurent
ToMe
SubjectRe: tree
Date16 June 2005 08:58
that's ok (the DIV solution). But how do I 'attach' them to your dragable
layers?

c u

laurent
FromMe
ToLaurent
SubjectRe: tree
Date20 June 2005 09:10
Laurent,

> that's ok (the DIV solution). But how do I 'attach' them to your
> dragable layers?

sorry, just realise I had overlooked this reply.

you would need to keep track of the positions of all the dragable layers.
Every time the layer moves, you will need to get the position of  each
relevant layer. You would then need to calculate the positions of the
relevant dots, and move the appropriate divs into the calculated positions.
You would need to store a lost of all the layers, and their positions, and
which one is linked to which one, and when someone drags, check which layer
they drag.

When each layer moves, the dragIsMove function is called, and the position
of the layer is determined at the end of the function, stored in
"newX" and "newY". You would then need to use these
values to reposition the divs manually.

This is sounding very complicated - unless you really know what you are
doing, you may be better off trying to find a script designed for what you
need to do.

Tarquin
This site was created by Mark "Tarquin" Wilton-Jones.
Don't click this link unless you want to be banned from our site.