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>
<script>
function addMemberToRole(draggable,droparea){
droparea.appendChild(draggable);
}
function removeMemberFromRole(draggable,droparea){
draggable.parentNode.removeChild(draggable);
}
</script>
<body>
<div id="source" style="width : 400; height : 100; border : 1px solid
blue">
<div id="person1" style="height : 20; width : 400; background :
red">John Smith</div>
<script type="text/javascript">new Draggable("person1", { revert :
true });</script>
</div>
<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">
</div>
<script type="text/javascript">Droppables.add("role1", { onDrop:
addMemberToRole });</script>
</body>
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 [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
