Bubble a dragDrop event

10 July, 2008 - 01:31 — tordona

Not sure if I have the proper subject title, apologies ahead of time.

Basically, I have a dragDrop event defined on a DIV element. That DIV element is the parent of various other elements, depending on the page, eg: b:tab, b:panel, etc.

I want that one dragDrop event to be fired regardless of the element a user drag and drops on, without having to define the event on multiple elements.

I created a simplifed example. In my example, the last b:box element has a dragDrop event defined, and has two children elements: b:panel. What can I do to make the box dragDrop event apply to it's children elements?

example made using demo explorer

<style type="text/css">

        .dragSymbol { border: 1px solid #666; padding: 3px; background: #FFF; position: absolute; opacity: .6; filter: alpha(opacity=60); }

        .dragSymbol.btl-drag-target { opacity: 1; filter: alpha(opacity=100); }

</style>

<b:dataSource e:behavior="b:localData" dataType="application/xml" name="exampleSource" id="exampleSource">

   <b:dataContainer>

      <xi:include href="examples/data/gridData.xml" />

   </b:dataContainer>

</b:dataSource>

<b:listGrid id="myListGrid" width="auto" height="200px" readonly="true" selectMultiple="false" rowClasses="rowClass1, rowClass2" dataSource="exampleSource" e:behavior="b:dragBase">

        <b:listGridCol select="title" label="Title" width="200px" />

        <b:listGridCol select="genre" label="Genre" width="100px" />

        <b:listGridCol select="rating" label="Rating" width="70px" align="right" />

        <e:handler event="dragStart" propagate="stop" type="application/javascript">

        <![CDATA[

                if (this.getProperty('focusedRow') != -1) {

                        var text = event.viewTarget.firstChild.nodeValue;

                        if (!text || text == null || text == 'undefined') { return; }

                        //var dataSource = bb.document.getElementById('exampleSource');

                        //var selected = this.getProperty('selectedIndex');

                        //var text = btl.dataSource.getValue(dataSource, selected, 'title', null);

                        var oSymbol = document.createElement('span');

                        oSymbol.setAttribute('id', '1000');

                        oSymbol.appendChild(document.createTextNode(text));

                        oSymbol.className = 'dragSymbol';

                        this.symbol = oSymbol;

                        document.body.appendChild(oSymbol);

                        btl.drag.dragManager.doDrag(this, event.viewTarget, event.startX, event.startY, oSymbol, 20, 10, 1, false, event.viewTarget.childNodes);

                }

        ]]>

        </e:handler>

        <e:handler event="scroll" type="application/javascript">

        <![CDATA[

                this.setProperty('focusedRow', -1);

        ]]>

        </e:handler>

        <e:handler event="drag" type="application/javascript">

        <![CDATA[

                if (event.dragTarget) {

                        var dragReceive = event.dragTarget.getAttribute('dragReceive');

                        if (!dragReceive) { return; }

                        if (dragReceive == 'allowedDrop') {

                                btl.drag.dragManager.acceptDragDrop(event.dragTarget);

                        }

                }

        ]]>

        </e:handler>

        <e:handler event="dragEnd" type="application/javascript">

        <![CDATA[

                document.body.removeChild(this.symbol);

                this.symbol = null;

        ]]>

        </e:handler>

</b:listGrid>

<b:box id="myBoxSample1" margin="10px" height="100px" width="100px" dragReceive="allowedDrop" backgroundColor="#0F0">

        Drag and Drop Items Here

        <e:handler event="dragDrop" type="application/javascript">

        <![CDATA[

                this.viewNode.innerHTML = event.dragSource.innerHTML;

        ]]>

        </e:handler>

</b:box>

<b:box id="myBoxSample2" margin="10px" height="100px" width="100px" dragReceive="notAllowedDrop" backgroundColor="#F00">

        Do not Drag and Drop Here

</b:box>

<b:box id="myBoxSample3" margin="10px" height="100px" width="100px" dragReceive="allowedDrop" backgroundColor="#0F0">

        Drag and Drop Items Here

        <e:handler event="dragDrop" type="application/javascript">

        <![CDATA[

                alert('Dropped on third box element');

        ]]>

        </e:handler>

</b:box>

<b:box id="myBoxSample4" margin="10px" height="100px" width="200px" dragReceive="allowedDrop" backgroundColor="#0F0">

        <e:handler event="dragDrop" type="application/javascript">

        <![CDATA[

                alert('Dropped on fourth box element with child panel elements');

        ]]>

        </e:handler>

        <b:panelSet columns="50% 50%" dragReceive=".">

                <b:panel backgroundColor="#DDDDDD">

                        Drag Drop Test Panel 1

                </b:panel>

                <b:panel backgroundColor="#EEEEEE">

                        Drag Drop Test Panel 2

                </b:panel>

        </b:panelSet>

</b:box>

bump to top. really need

21 July, 2008 - 16:09 — tordona

bump to top.

really need some help on this as this issue affects upgrade from 4.1.2 to 4.2.1 on production code.

couple of options

22 July, 2008 - 01:50 — risala

I'd use behavior to define the event handler and associate it to the elements that accept drops.

Alternately
Your example should work if you remove dragReceive attribute from the b:panelSet.

Removing the dragRecieve

22 July, 2008 - 16:52 — tordona

Removing the dragRecieve attribute from the panelSet doesn't work. Tried that already.

Am not sure if defining the event handler in a behavior, then associating it will allow the bubbling that I'm looking for. I can give it a try though.

The code that's currently in place with 4.1.2 works fine, but no longer works migrating to 4.2.1

Upgrade

22 July, 2008 - 20:52 — risala

My code also broke on upgrade and this is what I was given as change between 4.1.2 and 4.2.1.

The btl dragDrop structure is slightly different between the 4.1.2 and 4.2.0.
In the 4.1.2, the attribute "dragReceive" is belong to "dragTarget"
behavior. That explains why your code is working.

But, in the 4.2.0, the attribute "dragReceive" becomes a global attribute under the btl namespace. It does not belong to any element.

This may point to the reason for your error.

That helps a bit.

23 July, 2008 - 17:45 — tordona

That helps a bit. Thanks.

However, the example code I posted about is for 4.2.x and mostly pulled from the documentation.

ok, I'm a step closer....

23 July, 2008 - 21:09 — tordona

ok, I'm a step closer.... I've found that if I don't specify a dragMode attribute (eg: default to "outline") then bubbling will work correctly.

Also, if dragMode attribute is specified with a value of "real" or "symbol" then the bubbling will not work. A value of "outline" does have bubbling working correctly.

my test case:

<div style="height:auto" b:dragReceive="*">

   <div style="background: #F0F; border: 1px solid #000; height: 20px; margin: 2px;" e:behavior="b:drag" dragItem="dragMe" dragMode="real" dragSymbol=".">dragMode=real</div>

   <div style="background: #F0F; border: 1px solid #000; height: 20px; margin: 2px;" e:behavior="b:drag" dragItem="dragMe" dragMode="outline" dragSymbol=".">dragMode=outline</div>

   <div style="background: #F0F; border: 1px solid #000; height: 20px; margin: 2px;" e:behavior="b:drag" dragItem="dragMe" dragMode="symbol" dragSymbol=".">dragMode=symbol</div>

   <div style="background: #F0F; border: 1px solid #000; height: 20px; margin: 2px;" e:behavior="b:drag" dragItem="dragMe">no dragmode attribute</div>

</div>

<div style="height: 200px; background: #0FF; border: 1px solid #000" b:dragReceive="dragMe">

        <e:handler event="dragDrop" type="text/javascript">

                alert('The dragDrop event has fired');

        </e:handler>

        <b:panelSet rows="50% 50%" height="200px">

                <b:panel backgroundColor="#FFFF00">

                        Test Drop Panel 1

                </b:panel>

                <b:panel backgroundColor="#00FF00">

                        Test Drop Panel 2

                </b:panel>

</b:panelSet>

</div>

my fix

24 July, 2008 - 23:34 — tordona

ok, I fixed this issue locally. I'm not sure if this issue affects anyone else.

I noticed that when dragMode=real, the drag element had a tendency to float under other elements. So I added a z-index.

In dragAndDrop.xml, in the switch for dragMode attribute, case 'real' around line 720, I added:

this.viewNode.style.zIndex = '1000000000';

then in case 'symbol' around line 742, I added:

btl.drag.dragSymbol.style.zIndex = '1000000000';

then changed xOffset and yOffset to:
xOffset = oCoord.left - event.startX;
yOffset = oCoord.top - event.startY;

now everything works as I see it should, functionality restored to our application. You can test the behavior differences using my test case two posts above.

Client Framework