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-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
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 <lech...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Ouch...that is not a happy answer. It''s too late to switch at this point in development. I did get it working based on your response, but now when a user accidentally moves a group even a little it wants to move it to the topmost group. I''ll find some sort of solution I suppose. I will, however, suggest that this feature could use a bit of work for future versions. On May 28, 3:23 am, Eric Ongerth <ericonge...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> 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 <lech...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---