I am trying to get drag 'n drop functionality using scriptaculous
library but it is not working as I expected so I need to get some help
on how I am supposed to use this library correctly.

Basically I have a page where I have a list of people and I want to be
able to drag n drop them into areas to assign them specific roles.

This list of people is a div element made to act like a table, so it
has child elements which are nested divs made to look like rows
(columns are floating divs). Let's call this the source table.

Then I will have a series of other div tables for each assignable role
which I can drag people into or out of to give or take away that role
to them. Lets call these the role tables.

I want the source table to be droppable (to remove people from roles
by dragging them out of a role table back into the source table) and
all it's rows to be draggable elements. The idea is you drag the row
representing a person (which should not remove them from the source
table) and drop them into one of the role tables. You may also drag a
person out of a role table into another role to change their role or
drag them back to the source table to remove them from that role.

Now to do this I decided instead of going right into the page and edit
the drag n drop into it I would instead make a little demo and piece
by piece build up it's functionality until I got everything right and
working the way I'd like then go back and add the functionality to the
actual page.

So, doing this I ran into a ghosting problem. I have my source table
with one person in it, and one role table. I was able to get it so I
can nicely drag the person into the role but then it took the person
out of the source table- I want them to stay. So I added the ghosting
option and then suddenly broke it. Now I get some error when I drag
the person into the role table just from adding the ghosting option.

Why is that?

Here is what I have so far:

<script src="js/prototype.js"></script>
<script src="js/scriptaculous.js"></script>

function addMemberToRole(draggable,droparea){
function removeMemberFromRole(draggable,droparea){


<div id="source" style="width : 400; height : 100; border : 1px solid
  <div id="person1" style="height : 20; width : 400; background :
red">John Smith</div>
  <script type="text/javascript">new Draggable("person1", { revert :
true });</script>
<script type="text/javascript">Droppables.add("source", { onDrop:
removeMemberFromRole });</script>

<div id="role1" style="width : 400; height : 100; border : 1px solid
blue; margin-top : 25">
<script type="text/javascript">Droppables.add("role1", { onDrop:
addMemberToRole });</script>

This works but doesn't do what I want, I want the person to remain in
the source table. So try adding ", ghosting : true" to the draggavble
options and suddenly it breaks.

Once I get past this I can keep adding functionality and making the
data more and more like my real data until I get everything working
like the main page should.

You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at 

Reply via email to