Hi All, I am trying to develop a dynamic form creator application, whereby we can drag objects from a "palette" and drop them onto a "form" to build the design of our form. To achieve this, when I have dragged the object, and dropped it onto the "form" area, I want to get the position of where the object was dropped. I have a droppable area: Droppables.add(''dropArea'', {onDrop:addItem}); And a method that calls a webservice via AJAX: function addItem(element, dropon, event) { var s = element.id; // element.width,element.height,element.top,element.left, AJAXDDtest.DBAccess.InsertField(s,element.innerHTML,0,0,0,0, onGetDataComplete, onGetDataTimeOut); } Essentially, i want to get the width, height, top, and left of the element that was dropped - is this possible? I have tried looking around the sciptaculous wiki, but I can''t find a DOM for the droppables, unless someone can point me in the right direction? I am building the draggables as follows: var aproducts = document.getElementsByClassName(''box''); for (var i = 0; i < aproducts.length; i++) { new Draggable(aproducts[i].id, {ghosting:false, revert:true, onEnd:endItem}) } Any help would be greatfully received, Thanks, James. --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Off the top of my head, inside of your onDrop handler, call .positionedOffset() on the element and the drop container and see how much they differ: Droppables.add(target, { onDrop: function(element) { var elementOffset = element.positionedOffset(); var targetOffset = target.positionedOffset(); var diffX = targetOffset.left - elementOffset.left; var diffY = targetOffset.top - elementOffset.top; .... } }); On Thu, May 29, 2008 at 6:53 AM, Wyerarch <wyerarch-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > Hi All, > > I am trying to develop a dynamic form creator application, whereby we > can drag objects from a "palette" and drop them onto a "form" to build > the design of our form. > > To achieve this, when I have dragged the object, and dropped it onto > the "form" area, I want to get the position of where the object was > dropped. > > I have a droppable area: > > Droppables.add(''dropArea'', {onDrop:addItem}); > > And a method that calls a webservice via AJAX: > > function addItem(element, dropon, event) > { > var s = element.id; > // > element.width,element.height,element.top,element.left, > AJAXDDtest.DBAccess.InsertField(s,element.innerHTML,0,0,0,0, > onGetDataComplete, onGetDataTimeOut); > } > > Essentially, i want to get the width, height, top, and left of the > element that was dropped - is this possible? I have tried looking > around the sciptaculous wiki, but I can''t find a DOM for the > droppables, unless someone can point me in the right direction? > > I am building the draggables as follows: > > var aproducts = document.getElementsByClassName(''box''); > for (var i = 0; i < aproducts.length; i++) { > new Draggable(aproducts[i].id, {ghosting:false, revert:true, > onEnd:endItem}) > } > > Any help would be greatfully received, > > Thanks, > > James. > > >-- Science answers questions; philosophy questions answers. --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Frederick, Thanks for the reply! After switching the target and element offsets around it worked! Thanks for your help! James. On May 29, 4:26 pm, "Frederick Polgardy" <f...-SMQUYeM9IBBWk0Htik3J/w@public.gmane.org> wrote:> Off the top of my head, inside of your onDrop handler, call > .positionedOffset() on the element and the drop container and see how much > they differ: > > Droppables.add(target, { > onDrop: function(element) { > var elementOffset = element.positionedOffset(); > var targetOffset = target.positionedOffset(); > var diffX = targetOffset.left - elementOffset.left; > var diffY = targetOffset.top - elementOffset.top; > .... > } > > > > > > }); > On Thu, May 29, 2008 at 6:53 AM, Wyerarch <wyera...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > Hi All, > > > I am trying to develop a dynamic form creator application, whereby we > > can drag objects from a "palette" and drop them onto a "form" to build > > the design of our form. > > > To achieve this, when I have dragged the object, and dropped it onto > > the "form" area, I want to get the position of where the object was > > dropped. > > > I have a droppable area: > > > Droppables.add(''dropArea'', {onDrop:addItem}); > > > And a method that calls a webservice via AJAX: > > > function addItem(element, dropon, event) > > { > > var s = element.id; > > // > > element.width,element.height,element.top,element.left, > > AJAXDDtest.DBAccess.InsertField(s,element.innerHTML,0,0,0,0, > > onGetDataComplete, onGetDataTimeOut); > > } > > > Essentially, i want to get the width, height, top, and left of the > > element that was dropped - is this possible? I have tried looking > > around the sciptaculous wiki, but I can''t find a DOM for the > > droppables, unless someone can point me in the right direction? > > > I am building the draggables as follows: > > > var aproducts = document.getElementsByClassName(''box''); > > for (var i = 0; i < aproducts.length; i++) { > > new Draggable(aproducts[i].id, {ghosting:false, revert:true, > > onEnd:endItem}) > > } > > > Any help would be greatfully received, > > > Thanks, > > > James. > > -- > Science answers questions; philosophy questions answers.- Hide quoted text - > > - Show quoted text ---~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Right, my bad. Glad you got it working. Now I''m tempted to add .distanceFrom(anotherElement) as an element extension. :-) -Fred On Fri, May 30, 2008 at 7:37 AM, Wyerarch <wyerarch-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > Frederick, > > Thanks for the reply! > > After switching the target and element offsets around it worked! > > Thanks for your help! > > James. > > > On May 29, 4:26 pm, "Frederick Polgardy" <f...-SMQUYeM9IBBWk0Htik3J/w@public.gmane.org> wrote: > > Off the top of my head, inside of your onDrop handler, call > > .positionedOffset() on the element and the drop container and see how > much > > they differ: > > > > Droppables.add(target, { > > onDrop: function(element) { > > var elementOffset = element.positionedOffset(); > > var targetOffset = target.positionedOffset(); > > var diffX = targetOffset.left - elementOffset.left; > > var diffY = targetOffset.top - elementOffset.top; > > .... > > } > > > > > > > > > > > > }); >-- Science answers questions; philosophy questions answers. --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
That would be a very nice and useful addition indeed! :-) On May 30, 3:04 pm, "Frederick Polgardy" <f...-SMQUYeM9IBBWk0Htik3J/w@public.gmane.org> wrote:> Right, my bad. Glad you got it working. > > Now I''m tempted to add .distanceFrom(anotherElement) as an element > extension. :-) > > -Fred > > > > > > On Fri, May 30, 2008 at 7:37 AM, Wyerarch <wyera...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > Frederick, > > > Thanks for the reply! > > > After switching the target and element offsets around it worked! > > > Thanks for your help! > > > James. > > > On May 29, 4:26 pm, "Frederick Polgardy" <f...-SMQUYeM9IBBWk0Htik3J/w@public.gmane.org> wrote: > > > Off the top of my head, inside of your onDrop handler, call > > > .positionedOffset() on the element and the drop container and see how > > much > > > they differ: > > > > Droppables.add(target, { > > > onDrop: function(element) { > > > var elementOffset = element.positionedOffset(); > > > var targetOffset = target.positionedOffset(); > > > var diffX = targetOffset.left - elementOffset.left; > > > var diffY = targetOffset.top - elementOffset.top; > > > .... > > > } > > > > }); > > -- > Science answers questions; philosophy questions answers.- Hide quoted text - > > - Show quoted text ---~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---