You're going to have to delegate the drops to the outermost droppable
element which then determines (based on mouse pointer position in the
event) which of its children actually received the drop.
That, or switch to jQuery, which accommodates nested droppables more
conveniently. That's pretty much why I switched.
On May 27, 1:06 pm, blechler <[EMAIL PROTECTED]> wrote:
> Hey all,
>
> I am using AJAX calls to get lists of groups. As I get responses from
> my AJAX calls I dynamically create new DOM objects. The HTML would
> look something like this.
>
> <div class="groupNode">
> <div class="groupNameContainer">Group 1</div>
> <div class="childGroups">
> <div class="groupNode">
> <div class="groupNameContainer">Child Group 1</div>
> <div class="childGroups"></div>
> </div>
> <div class="groupNode">
> <div class="groupNameContainer">Child Group 2</div>
> <div class="childGroups"></div>
> </div>
> </div>
> </div>
>
> The groupNode elements are draggable, the handle being the
> groupNameContainer element. The "Droppable" element is the
> groupNameContainer element. I want to drag child group 1 onto child
> group 2, but I can't because it seems that since child group 2 was
> dynamically generated after child group 1 it doesn't register as a
> valid target of a drop. If I create all the elements first and then
> iterate from bottom to top I can now drop child group 1 onto child
> group 2, but I cant drop child group 2 onto child group 1.
>
> The problem is completely resolved if I make groupNode droppable, but
> that is not desirable from a user standpoint because then all the
> child nodes also light up when hoverclass is specified.
>
> The code below does not exactly match the example above, but you are
> unable to drag items down the list. Only up.
>
> simplified code:
>
> function init() {
> $A(arGroupNames).each(function(s) {
> arGroupObjects.push(new groupNode(s));
> $('canvas').appendChild(arGroupObjects.last().getDomObj());
> });
> new Effect.Appear('canvas');
>
> }
>
> arGroupObjects = [];
> arGroupNames = ['grp 1', 'grp 2', 'grp 3', 'grp 4', 'grp 5', 'grp 6',
> 'grp 7', 'grp 8'];
>
> var groupNode = Class.create({
> initialize: function(nm) {
> this.groupName = nm;
> this.container = new Element('div', {'class':'groupNode'});
> this.nameContainer = new Element('span',
> {'class':'nameContainer'}).update(this.groupName);
> this.childContainer = new Element('div', {'style':'display:none',
> 'class':'childCont'});
> Droppables.add(this.nameContainer, {hoverclass:'hovering',
> accept:'groupNode', onDrop:moveGroup});
> },
>
> arChildren: [],
>
> getDomObj: function() {
> if (!this.container.firstDescendant()) {
> this.buildDomObj();
> }
> return this.container;
> },
>
> buildDomObj: function() {
> this.container.appendChild(this.nameContainer);
> this.container.appendChild(this.childContainer);
> this.dragger = new Draggable(this.container,
> {handle:this.nameContainer, ghosting:false, zIndex:1000,
> revert:true});
> }
>
> });
>
> function moveGroup() {
> alert('foo');
>
> }
>
> Event.observe(window, 'load', init);
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" group.
To post to this group, send email to rubyonrails-spinoffs@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
