How can I change Size to Float?

How-to Discussions
1

My code has an error. (search ‘Here!!!’)
I wanna get rect’s position while dragging.

<App>
    <StackPanel ux:Class="MyPanel">
        <Size ux:Property="rectX" />

        <JavaScript>
            var print = debug_log;
            var objThis = this;

            var Observable = require("FuseJS/Observable");

            var myXY = Observable({x:20, y:40});

            function onClick(args)
            {
                print(objThis.rectX);// Here!!!
                // print(JSON.stringify(myXY));
                // print(JSON.stringify(args));
                // print(JSON.stringify(rect));
            }
            
            module.exports = {
                onClick,
                myXY
            }
        </JavaScript>
        <Rectangle ux:Name="rect" X="{myXY.x}" Y="{myXY.y}" Width="300" Height="100" Background="#ffff00">
            <Draggable />
            <WhileDragging>
                <Set Target="rectX" Value="{Property rect.X}" />
            </WhileDragging>
        </Rectangle>
        <Button Text="Click" Width="100" Height="100">
            <Clicked>
                <Callback Handler="{onClick}" />
            </Clicked>
        </Button>
    </StackPanel>

    <MyPanel />
</App>
2

Hey! What you are trying to do here is not a good idea since it expects a synchronous relationship between your UX and your JavaScript (which we make a point of having asynchronous so that the JavaScript thread does now slow down the UI.

This might be a case where you’d want to use Uno instead.

Could you explain in more detail what you are trying to achieve? In many cases there are pure UX solutions where it might seem you’d need JavaScript :).