[Rails-spinoffs] Drag & Drop with dynamically generated objects

[blechler]

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
-~----------~----~----~----~------~----~------~--~---