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

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

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

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

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

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. ;-)

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

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.