Receiving Mouse Events for Covered Views

[antun]

One problem that developers frequently run into is that a view that is that mouse events can't be captured for a view that is covered by another, clickable view. This is most apparent when dragging one view over another: The draggable view must be clickable in order to receive the first onmousedown event that starts the dragging, which means that it won't allow any mouse events to pass to views beneath it.

The solution is to have the views that are to send the events actively check the absolute mouse position against their own coordinates onidle (all the time).

This is an extremely simple example to illustrate that point. A real world scenario would have logic that decided when to start and stop checking the mouse position, as well as how many times to execute any code when the mouse rolls over the lower views. You may also want to check when the mouse goes up after dragging (for drag and drop) - in that case you would have the location testing code executed when the view named dragger sends the onmouseup event:


<canvas debug="true" height="800" width="800">
<debug height="400" width="400" x="300"/>
<dataset name="myds">
<boxes>
<box name="one" />
<box name="two" />
<box name="three" />
<box name="four" />
<box name="five" />
<box name="six" />
<box name="seven" />
<box name="eight" />
</boxes>
</dataset>

<class name="box" width="140" height="40" bgcolor="0xfea366">
<text name="txt" datapath="@name" x="5" y="5" />
<method event="onidle" reference="LzIdle"><![CDATA[
var minX = this.getAttributeRelative( "x", canvas )
var maxX = minX + this.width;
var minY = this.getAttributeRelative( "y", canvas )
var maxY = minY + this.height;
if ( ((canvas.getMouse("x")>minX)&&(canvas.getMouse("x")<maxX))
&& ((canvas.getMouse("y")>minY)&&(canvas.getMouse("y")<maxY)) ){
debug.write( this.txt.text );
}
]]>
</method>
</class>

<simplelayout axis="y" spacing="10" />

<box x="100" y="20" datapath="myds:/boxes[1]/box" />

<view name="dragger" x="250" y="50" bgcolor="0x33de31"
width="50" height="50"
onmousedown="this.dragger.apply()"
onmouseup="this.dragger.remove()"
clickable="true"
options="ignorelayout">
<text align="center" valign="middle">Drag Me</text>
<dragstate name="dragger" />
</view>
</canvas>


Enjoy!

[vmuthu]

<canvas debug="true" height="800" width="800">
<debug height="400" width="400" x="300"/>
<dataset name="myds">
<boxes>
<box name="one" />
<box name="two" />
<box name="three" />
<box name="four" />
<box name="five" />
<box name="six" />
<box name="seven" />
<box name="eight" />
</boxes>
</dataset>

<class name="box" width="140" height="40" bgcolor="0xfea366"
onmousedown="this.dragger.apply()"
onmouseup="this.dragger.remove()">
<text name="txt" datapath="@name" x="5" y="5" />
<method event="onidle" reference="LzIdle"><![CDATA[
var minX = this.getAttributeRelative( "x", canvas )
var maxX = minX + this.width;
var minY = this.getAttributeRelative( "y", canvas )
var maxY = minY + this.height;
if ( ((canvas.getMouse("x")>minX)&&(canvas.getMouse("x")<maxX))
&& ((canvas.getMouse("y")>minY)&&(canvas.getMouse("y")<maxY)) ){
debug.write( this.txt.text );
}
]]>
</method>

<dragstate name="dragger" />
</class>

<simplelayout axis="y" spacing="10" />

<box x="100" y="20" datapath="myds:/boxes[1]/box" />

</canvas>

I added the dragstate to the class 'box' from the previous example. I am trying to figure out which box is on top of which box, so that I can reposition the boxes. Is there an easy way to do this. I am having hard time figuring out which box is being dragged versus which one it is on top of. Thanks in advance.

[Holomatrix]

Hi Antun,

your example will probably make my day :)

I want do add a view to another when it is dragged over it. Ok this is easy, but the target-view should recognize when a view is dragged over it, and in that way that only the y/x mouse coordinates should be recognized not the whole size of the view which is dragged to it, because the target is very smaller than the other view.

Any Ideas?

Regards,
Ingo

[zalex]

I think that i want to do something near this ...

Iwant to drag a picture above somme view. On mouse up the picture stay in the last view. For this there's no probleme. but i want to highlight the view when the drag picture is over.

Can someone give me a simple code ? with just three red view which become blue when something is drag over them ?

[illogic_code]

lol

one post per year!!!

:D :D

[hipik]

here is a global one that helped me tackle the scroll bar on mouse wheel
<script>
<![CDATA[
function isMouseOver(component)
{
var minX = component.getAttributeRelative("x", canvas);
var maxX = minX + component.width;
var minY = component.getAttributeRelative("y", canvas)
var maxY = minY + component.height;
return ((canvas.getMouse("x")>minX)&&(canvas.getMouse("x")<maxX))
&& ((canvas.getMouse("y")>minY)&&(canvas.getMouse("y")<maxY));
}
]]>
</script>



and here is the class
<library>

<class name="components_base_scrollbar_basescrollbar" extends="basescrollbar">

<attribute name="wheelstepsize" type="number" value=".5"/>

<method event="onmousewheeldelta" reference="LzKeys" args="k">
<![CDATA[
if(isMouseOver(scrolltarget.immediateparent) && this.getAttribute('visible') && this.usemousewheel)
{
if(k == -3){
page(wheelstepsize);
}else if(k == 3){
page(-wheelstepsize);
}
}
]]>
</method>

</class>

</library>

Cheers!