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 prototype-scriptaculous@googlegroups.com 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 -~----------~----~----~----~------~----~------~--~---