thr3ads.net - Rails spinoffs - Drop Zones onHover Highlighting [Sep 2006]

If this information is useful, please help other people find it:
Share via:

royrusso

2006-Sep-23 03:22 UTC

Drop Zones onHover Highlighting

After talking with Thomas Fuchs, he sent me a patch that was sent to
him by a community member, that allows having a dropmarker placed
onHover, much like netvibes does:
--------------------
I have made two changes to the latest (publicly released) file called
"dragdrop.js" of the scriptaculous library.


Change 1:
I have made one change in the Sortables "onHover" function, i have
moved the mark and umark calls to after the check if the element is
changed, which gives the following code. If i didn''t make this change,
the area was marked even though the drop area wasn''t changed to an
empty space yet.


  onHover: function(element, dropon, overlap) {
    if(overlap>0.5) {
      if(dropon.previousSibling != element) {
        Sortable.mark(dropon, ''before'');
        var oldParentNode = element.parentNode;
        element.style.visibility = "hidden"; // fix gecko rendering
        dropon.parentNode.insertBefore(element, dropon);
        if(dropon.parentNode!=oldParentNode)
          Sortable.options(oldParentNode).onChange(element);
        Sortable.options(dropon.parentNode).onChange(element);
      }
    } else {
      var nextElement = dropon.nextSibling || null;
      if(nextElement != element) {
        Sortable.mark(dropon, ''after'');
        var oldParentNode = element.parentNode;
        element.style.visibility = "hidden"; // fix gecko rendering
        dropon.parentNode.insertBefore(element, nextElement);
        if(dropon.parentNode!=oldParentNode)
          Sortable.options(oldParentNode).onChange(element);
        Sortable.options(dropon.parentNode).onChange(element);
      }
    }
  },


Change 2:
The mark function. I changed this function so it is allways called. The
only difference in ghosting and non-ghosting is that when you don''t
ghost, like in my example, you will see the dropmarker in full width
and height.


  mark: function(dropon, position) {
    // always mark, see further down
    var sortable = Sortable.options(dropon.parentNode);


    if(!Sortable._marker) {
      Sortable._marker = $(''dropmarker'') ||
document.createElement(''DIV'');
      Element.hide(Sortable._marker);
      Element.addClassName(Sortable._marker, ''dropmarker'');
      Sortable._marker.style.position = ''absolute'';

document.getElementsByTagName("body").item(0).appendChild(Sortable._marker);
    }
    var offsets = Position.cumulativeOffset(dropon);
    Sortable._marker.style.left = offsets[0] + ''px'';
    Sortable._marker.style.top = offsets[1] + ''px'';


    //
    // If we are not ghosting, we should show the dropmarker in full
width and height of the element
    if (!sortable.ghosting) {
      Sortable._marker.style.width = dropon.clientWidth+''px'';
      Sortable._marker.style.height =
dropon.clientHeight+''px'';
    } else {
      if(position==''after'')
        if(sortable.overlap == ''horizontal'')
          Sortable._marker.style.left = (offsets[0]+dropon.clientWidth)
+ ''px'';
        else
          Sortable._marker.style.top = (offsets[1]+dropon.clientHeight)
+ ''px'';
    }
    Element.show(Sortable._marker);
  },


Any comments are appreciated and credit also :)


Regards,


Gilles vd Hoven

---------------------

I have been playing with the script so far. It doesn''t seem to do
anything regardless of what you define your dropmarker selector in CSS
to be in Win IE. Seems to work in FF.

My case may be a special one, as I am trying to sort divs and not
lists, so the dropmarker sizes with the above hacks, overlap currently.
I''m assuming this should work for lists just fine.

Regards,
Roy Russo


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

tankut-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org

2006-Sep-24 01:04 UTC

head link

Re: Drop Zones onHover Highlighting

Here is my solution to this problem, you might want to have a look

http://tanrikut.blogspot.com/2006/09/scriptaculous-patch.html


Tankut Koray


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

royrusso

2006-Sep-24 13:09 UTC

head link

Re: Drop Zones onHover Highlighting

Tankut, Thanks. I will have a look at it and let you know if it works
any better than the before-mentioned changes.

PS. May also be a good idea, to add it to,
http://dev.rubyonrails.org/ticket/2992, or the scriptaculous wiki.

Regards,
Roy Russo
JBoss Portal Developer


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

tankut-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org

2006-Sep-24 19:16 UTC

head link

Re: Drop Zones onHover Highlighting

I had added to the ticket but not to wiki. I will also add it there

Tankut


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

royrusso

2006-Sep-25 15:14 UTC

head link

Re: Drop Zones onHover Highlighting

Tried posting to your blog, seems like the onEmpyHover you have on
there is very different from the one packaged in 1.6.4. Did you
document all changes you made?

Seems like browsers don''t like the onEmptyHover you have on there.


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

royrusso

2006-Sep-25 15:21 UTC

head link

Re: Drop Zones onHover Highlighting

ok... so for onEmptyHover, what I have working with your changes is the
following:

  onEmptyHover: function(element, dropon, overlap) {
    var oldParentNode = element.parentNode;
    var droponOptions = Sortable.options(dropon);

    if(!Element.isParent(dropon, element)) {
      var index;

      var children = Sortable.findElements(dropon, {tag:
droponOptions.tag, only: droponOptions.only});
      var child = null;

      if(children) {
        var offset = Element.offsetSize(dropon, droponOptions.overlap)
* (1.0 - overlap);

        for (index = 0; index < children.length; index += 1) {
          if (offset - Element.offsetSize (children[index],
droponOptions.overlap) >= 0) {
            offset -= Element.offsetSize (children[index],
droponOptions.overlap);
          } else if (offset - (Element.offsetSize (children[index],
droponOptions.overlap) / 2) >= 0) {
            child = index + 1 < children.length ? children[index + 1] :
null;
               style = "color: rgb(255, 0, 0);" >
Sortable.createGuide(element);
               dropon.insertBefore(element, child);
               dropon.insertBefore(Sortable._guide, element);
               Sortable.markEmptyPlace(element);
               Sortable.options(oldParentNode).onChange(element);
               droponOptions.onChange(element);
            break;
          } else {
            child = children[index];
            break;
          }
        }
      }


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

Tankut Koray

2006-Sep-25 16:06 UTC

head link

Re: Drop Zones onHover Highlighting

Hi,

Yes you are right that my onEmptyHover function doesnt work because it
is somehow scrambled while pasting in blog. So I updated the blog. I
only added those three red lines so if you insert them into the
original script you should get it working.

On 9/25/06, royrusso <royrusso-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
> Tried posting to your blog, seems like the onEmpyHover you have on
> there is very different from the one packaged in 1.6.4. Did you
> document all changes you made?
>
> Seems like browsers don''t like the onEmptyHover you have on there.
>
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

royrusso

2006-Sep-26 21:32 UTC

head link

Re: Drop Zones onHover Highlighting

Yep. What you have now, is perfect.

Thanks Tankut!


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

Tankut Koray

2006-Sep-26 23:20 UTC

head link

Re: Drop Zones onHover Highlighting

Thanks:)

On 9/27/06, royrusso <royrusso-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
> Yep. What you have now, is perfect.
>
> Thanks Tankut!
>
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Jerod Venema

2006-Sep-27 02:43 UTC

head link

Re: Drop Zones onHover Highlighting

Anyone have a working example of this?

On 9/26/06, Tankut Koray <tankut-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
> Thanks:)
>
> On 9/27/06, royrusso
<royrusso-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> >
> > Yep. What you have now, is perfect.
> >
> > Thanks Tankut!
> >
> >
> > >
> >
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

The Manhatten Project

2006-Sep-27 20:53 UTC

head link

Re: Drop Zones onHover Highlighting

Can someone post an already altered dragdrop.js file? even better still
an addition to the Treasure Chest?  :-)  The blog is a good read but a
final .js file is what it is missing.  Thanks Tankut, great work ( when
I see it working!)


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

tankut-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org

2006-Sep-28 09:24 UTC

head link

Re: Drop Zones onHover Highlighting

Hi,

Finally with the help of my friend Sinan, here is the link to final .js
file:

http://sinan.ussakli.net/script/script/dragdrop.js

And here is the example:

http://sinan.ussakli.net/script/

Tankut


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

Tony Gray

2006-Sep-28 15:25 UTC

head link

Re: Drop Zones onHover Highlighting

Excellent! It works perfect in FireFox but acts goofy in IE6. Anybody else
seeing that?

On 9/28/06, tankut-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
<tankut-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
>
> Hi,
>
> Finally with the help of my friend Sinan, here is the link to final .js
> file:
>
> http://sinan.ussakli.net/script/script/dragdrop.js
>
> And here is the example:
>
> http://sinan.ussakli.net/script/
>
> Tankut
>
>
> >
>

-- 
Tony Gray
901-419-1775 (w)
901-412-4641 (c)
662-796-1928 (h)
http://tgrayimages.com


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

Tony Gray

2006-Sep-28 15:28 UTC

head link

Re: Drop Zones onHover Highlighting

Excellent! It works perfect in FireFox but acts goofy in IE6. Anybody else
seeing that?


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

Tankut Koray

2006-Sep-28 16:38 UTC

head link

Re: Drop Zones onHover Highlighting

Hi Tony,

Actually there is a problem in FF also. The right element is moving to
right mode than expected. in IE it is move down.

There is a problem of margin copied to Sortable._guide. So I updated
the script so that element''s margin is now copied to the
Sortable._emptyPlaceMarker.

Anyway, final script is attached and example page will be updated soon.

Tankut

On 9/28/06, Tony Gray
<tonygray216-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Excellent! It works perfect in FireFox but acts goofy in IE6. Anybody else
> seeing that?
>
>  >
>

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

Rails spinoffs - Sep 2006 - Drop Zones onHover Highlighting

Drop Zones onHover Highlighting

Re: Drop Zones onHover Highlighting

Re: Drop Zones onHover Highlighting

Re: Drop Zones onHover Highlighting

Re: Drop Zones onHover Highlighting

Re: Drop Zones onHover Highlighting

Re: Drop Zones onHover Highlighting

Re: Drop Zones onHover Highlighting

Re: Drop Zones onHover Highlighting

Re: Drop Zones onHover Highlighting

Re: Drop Zones onHover Highlighting

Re: Drop Zones onHover Highlighting

Re: Drop Zones onHover Highlighting

Re: Drop Zones onHover Highlighting

Re: Drop Zones onHover Highlighting