scriptaculous drag'n drop

hi again,
another question: how does it works that a table, which appears after a mouseover, can be moved by the viewer (drag’n drop). it’s a scriptaculous action i think, but how do i do it?
thanks in advance!

example: http://www.bigonecompany.com/playfieldtest/gamecenter.html
(mouse over the playfield-logo on the austrian map, the appearing orange field should be dragable)


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Not dragable for me in Safari or FF

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Not here either.

It’s easy to make something draggable, slightly less easy to make it appear and then be draggable.

Draw an HTML layer (CSS Layout button on) on your page. Note what Freeway has called it (the Title field in the Inspector). Apply the Protaculous Action to the page, choose scriptaculous-packed from the library picker in the Actions palette, then click on either of the Function Body buttons. Enter something like this:

 new Draggable('item1',{});

That’s assuming that your DIV is called item1 in Freeway, so change that to whatever it’s really called in your layout.

Publish and preview in a browser. You should be able to drag the div around the screen.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

hi guys!

thanks a lot waltd, now it works. before it wasn’t dragable cause i didn’t know how to do this …

greez


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

sorry, once again

it works great, if the site isn’t in a frameset (www.bigonecompany.com/playfieldtest/gamecenter.html) but if i put the html-file in a frameset then the party’s over (www.bigonecompany.com/playfieldtest/index3.html).
why this???

thx in advance


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It looks like it’s draggable, but what I am seeing wrong here is that the DIV that pops up isn’t set to be “sticky”, so it fades away the moment I mouse off of the trigger point.

Also, if you are adding the scriptaculous library to one of the child pages of the frame, make sure you only use it on one of them. It shouldn’t cause any trouble, but it will cause the visitor to re-load a hefty library twice.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hey Walter this is nifty.

I can see when you would use such a thing (as in this case when you wanted to move the box to see the rest of the map) but more importantly how would the casual viewer even know this was possible. Would you not have to spell it out in BIG LETTERS or am I just naive.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Not at all. Most of this WebTwoOh stuff requires new visual metaphors
to go with the fancy interactive bits. For example, the reason why
you often see a little spinny thing or some other graphical
“throbber” when you click is that otherwise, you wouldn’t know it was
working – you might just keep clicking, or think your browser had
crashed.

So for something that’s draggable, I might put a little handle image
somewhere in the draggable box, and I might also change the cursor
when you mouse over it. For the former, think about the top of a
palette in an application. Often it will have a texture or grippy
look to it that says “drag me!” (Here’s a little ASCII-gram of one.)

-:-:-:-:-:-:-:-:-:-:-:-:-:-:-

If you give any such object (and this can be a DIV with a background
image or a solid picture, whatever works for you) the class name that
you have registered to Draggable as the option ‘handle’, then the
Draggable behavior will only drag when you click on the handle area,
and ignore the rest.

Then to get the cursor to change, you can also add ‘cursor:move;’ to
your class definition for the ‘handle’ class, and the effect is
complete.

I realize that’s a bit abstract, so here’s an example:

Draw a box, give it some color and size. Draw a second box as a child
of the first box, give it a different color and position it at the
top of the first box, like a title bar on an application window.

In your styles palette, create a new style called drag. The only
thing you need to add to it is the cursor property, so you do that
with the Extended button. Click New, then in Name, enter ‘cursor’, in
Value, enter ‘move’.

Click on the child box that you want to drag with, and while it is
selected, click on your drag style from the Styles list. At this
point, if you were to preview, whenever your mouse is over the
handle, it will change into the Move cursor (arrows pointing like a
compass rose).

Now, go back to your Draggable. Note the Title of the main box
(parent of the handle), and enter this in the Protaculous Action code
block:

new Draggable('item1',{handle:'drag'});

Now preview in a browser. In addition to the cursor change noted
above, you will find that you can only drag the box by its handle.
Nothing else will register.

Walter

On Aug 1, 2008, at 8:53 PM, DeltaDave wrote:

Hey Walter this is nifty.

I can see when you would use such a thing (as in this case when you
wanted to move the box to see the rest of the map) but more
importantly how would the casual viewer even know this was
possible. Would you not have to spell it out in BIG LETTERS or am I
just naive.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Well it certainly works for me!

Just got to find somewhere appropriate to utilise it now.

Thanks Walter - we learn something new every day.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

FF3 displays a hand while Safari displays the Move cursor (arrows pointing like a compass rose).

Is there a way of ensuring that all browsers display the same Move cursor or am I being pedantic.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sorry, no you can’t do that. I would leave it alone. People who are used to Firefox will know that is the move cursor, and vice-versa.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options