Forum: Rails Spinoffs (closed, excessive spam) circumvent default event bubbling

8cf6d14fe2c55b53ad7f0301ad379010?d=identicon&s=25 I. E. Smith-Heisters (Guest)
on 2008-06-16 20:29
(Received via mailing list)
Hi all,

I'm doing a drag-proxy like this:

---
    this.element = element;

    this._proxy = this.element.cloneNode(true);
    this._proxy.absolutize();
    this._proxy.style.opacity = 0.7;
    this._proxy.clonePosition(element);

    this._proxy.observe('mouseup', this.destroy.bind(this));
    this.element.observe('mouseup', this.destroy.bind(this));

    document.body.appendChild(this._proxy);
    new Draggable(this._proxy).initDrag(ev);
---

which is necessary so that the draggable is rendered as a child of
document.body and therefore can float over scrollable divs.

However, now the proxy captures mouseup events, which nullifies the
original element's click and doubleclick events (probably not the best
idea to have mousdown, up, click, and doubleclick all on one element,
but oh well). So I want to route event bubbling from the proxy to the
parent, but keep the proxy a child of document.body. I think I only
really need to route mouseup. So I tried this:

---
    this._proxy.observe('mouseup', function(ev)
{this.element.dispatchEvent(ev);}.bind(this));
---

but that throws this error, which is rather incomprehensible:

---
[Exception... "Component returned failure code: 0x80070057
(NS_ERROR_ILLEGAL_VALUE) [nsIDOMEventTarget.dispatchEvent]" nsresult:
"0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame ::
http://localhost:3000/javascripts/behaviors.js?1211228591 ::
anonymous :: line 12" data: no]
---

Can anyone please shed some light on how to approach this problem?

Thanks,
Ian
F1fcf834ddad415f60d29c87cc10d4d4?d=identicon&s=25 kangax (Guest)
on 2008-06-16 22:08
(Received via mailing list)
I believe that dispatchEvent accepts a manually instantiated event
only. Moreover, this won't work in IE, which follows (surprise!) its
own standard (fireEvent). It looks like one of the solutions would be
to work with custom events, as they allow for a more flexibility.

- kangax
8cf6d14fe2c55b53ad7f0301ad379010?d=identicon&s=25 Ian Smith-Heisters (Guest)
on 2008-06-16 22:15
(Received via mailing list)
Thanks kangax.

I'm only supporting Firefox, so IE incompatibility isn't an issue :D

I'd tried something with custom events and .fire(), but I couldn't
figure out how to use that to fire the "mouseup" event, which is the
one I need. Are you suggesting that there's some way to replace the
mouseup event with a custom event?

Thanks again,
Ian
F1fcf834ddad415f60d29c87cc10d4d4?d=identicon&s=25 kangax (Guest)
on 2008-06-16 22:32
(Received via mailing list)
Well, if you make Draggable listen to "mouse:up" and will then fire
"mouse:up" via "proxy", I don't see why this shouldn't work ; )

- kangax
Ca3e484c121268e4c8302616b2395eb9?d=identicon&s=25 T.J. Crowder (Guest)
on 2008-06-17 10:49
(Received via mailing list)
On Jun 16, 9:14 pm, "Ian Smith-Heisters" <i...@0x09.com> wrote:

> I'm only supporting Firefox, so IE incompatibility isn't an issue :D

Nirvana.  I have had a glimpse of Nirvana.

-- T.J. ;-)
327bdb2421fd302aa0f656b0b0acd5de?d=identicon&s=25 Matt Foster (Guest)
on 2008-06-17 20:50
(Received via mailing list)
Have you looked into scriptaculous's draggable/sortable classes?

http://github.com/madrobby/scriptaculous/wikis/draggable



--
Matt Foster
Ajax Engineer
Nth Penguin, LLC
http://www.nthpenguin.com
8cf6d14fe2c55b53ad7f0301ad379010?d=identicon&s=25 Ian Smith-Heisters (Guest)
on 2008-06-17 21:21
(Received via mailing list)
This is a modification of those classes. You have to reattach the
draggable to the body in order for it to "float" outside of divs that
hide their overflow (eg. where you have divs that are scrollable
independent of the window). The problem being that in creating the
proxy that gets attached to the body, it intercepts mouse events and
then bubbles them up to the body, circumventing the original div. The
solution I actually ended up with is to set the proxy with a lower
z-index than the original div, which makes the mouse events go to the
original. I don't think this will work in all situations, and I'm very
skeptical of its versatility--but it seems to work for me for the
moment.
This topic is locked and can not be replied to.