How to get < Draggable /> to return to its original location when you let it go?

Anyone have a tip on how to get Draggable to return to its original location when you let it go?

This is my example and when you let it go I want it do go back to it’s original location in the WrapPanel.

Is this possible?

<WrapPanel FlowDirection="LeftToRight" Alignment="Center">
     <Each Items="{user.Tags}">
        <Rectangle Margin="3"  Fill="White" CornerRadius="5">
            <Text TextColor="#2a9de6" Padding="10,5" Value="{tag}" FontSize="18" />
            <Draggable />
            <WhileDragging>
                <Rotate Degrees="90" Duration="0.8"
                        Easing="BounceOut" EasingBack="BounceIn"/>
            </WhileDragging>
        </Rectangle>
    </Each></WrapPanel>

Hi! Here is one way of doing it (i modified your data-model slightly just for my own convenience :slight_smile: ):

<App Theme="Basic">
    <Panel>
        <JavaScript>
            var Observable = require("FuseJS/Observable");

            var tags = Observable("foo", "bar", "foobar", "barfoo");

            module.exports = {
            tags:tags
            };
        </JavaScript>
        <WrapPanel FlowDirection="LeftToRight" Alignment="Center">
            <Each Items="{tags}">

                <Panel Physics.IsPhysicsWorld="true">
                    <Rectangle Margin="3"  Fill="White" CornerRadius="5">
                        <Text TextColor="#2a9de6" Padding="10,5" Value="{}" FontSize="18" />
                        <Draggable />
                        <WhileDragging>
                            <Rotate Degrees="90" Duration="0.8"
                                    Easing="BounceOut" EasingBack="BounceIn"/>
                        </WhileDragging>
                    </Rectangle>
                    <PointAttractor Radius="500" Strength="100" Exclusive="True"/>
                </Panel>
            </Each>
        </WrapPanel>
    </Panel>
</App>

Notice Physics.IsPhysicsWorld="true" which makes sure that each item in the Each creates its own Physics simulation (so as to only affect that item). And the

<PointAttractor Radius="500" Strength="100" Exclusive="True"/>

, which you might have to tweak (Strenght and Radius).

Thank you Kristian! But if you want to interact with another PointAttractor outside the physics simulation.

I trying to build a drag and drop trash can.

The code below works if you set the Physics.IsPhysicsWorld to false. But then you lose the Physics simulation and you can drag tags on each other. Thanks! =)

<App Theme="Basic">
    <Panel Background="#2a9de6">
        <JavaScript>
            var Observable = require("FuseJS/Observable");

            var tags = Observable("foo", "bar", "foobar", "barfoo");
            function trash(args){

            }
            module.exports = {
            tags:tags,
            trash:trash
            };
        </JavaScript>
        <WrapPanel FlowDirection="LeftToRight" Alignment="TopCenter" Margin="0,30,0,0">
            <Each Items="{tags}">
                <Panel Physics.IsPhysicsWorld="false">
                    <Rectangle Margin="3" Fill="White" CornerRadius="5">
                        <Text TextColor="#2a9de6" Padding="10,5" Value="{}" FontSize="18" />
                        <InForceFieldAnimation ForceField="visitedAttractor" From="0.1" To="0.9">
                            <Change tagsTrashCan.Opacity="1" Duration="1" />                        </InForceFieldAnimation>
                        <EnteredForceField ForceField="visitedAttractor" Threshold="0.9" Handler="{trash}" />
                        <Draggable />
                    </Rectangle>
                    <PointAttractor Radius="700" Strength="800" Exclusive="true" />
                </Panel>
            </Each>
        </WrapPanel>

        <Panel Height="100" Width="100%" Alignment="Bottom" Margin="0,0,0,0" >            <PointAttractor ux:Name="visitedAttractor" Radius="400" Strength="2000" Offset="0,200,0"/>
            <Circle ux:Name="tagsTrashCan" Opacity="0.4" Fill="#000" Width="50" Height="50" >                <Stroke Width="5" Brush="#f00" />
            </Circle>
        </Panel>

    </Panel>
</App>