# Drag and drop component between pages

**URL:** <https://forums.fusetools.com/t/drag-and-drop-component-between-pages/6863>\
**Category:** How-to Discussions\
**Created:** [January 15, 2018, 2:40pm UTC](https://forums.fusetools.com/t/drag-and-drop-component-between-pages/6863 "2018-01-15T14:40:06Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ana\_Almeida](https://avatars.discourse-cdn.com/v4/letter/a/bbe5ce/32.png) [@Ana\_Almeida](https://forums.fusetools.com/u/Ana_Almeida)\
**Post date:** [January 15, 2018, 2:40pm UTC](https://forums.fusetools.com/t/drag-and-drop-component-between-pages/6863/1 "2018-01-15T14:40:06Z")

</div>

Hi guys,

I was asked to do a Proof of Concept for a mobile app for tablets and one of the functionalities of this app is that we can drag a component between pages.

Just like this in the video:

[Drag to other page](https://www.dropbox.com/s/gqsm86tsbt4foy7/Drag%20to%20other%20page.MOV?dl=0)

My question is if this is possible to implement and what would be the best way to do it. Can someone help me?

I’ve tried with Page Control and Point Attraction to change the page and I was successful but the component doesn’t pass to the other page.

Thank you.

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [January 16, 2018, 11:23am UTC](https://forums.fusetools.com/t/drag-and-drop-component-between-pages/6863/2 "2018-01-16T11:23:44Z")

</div>

Hi Ana,

if you’re saying that you have a part of your PoC working, could you please share the code so we can help you with it?

---

<div class="post-metadata">

**Author:** ![Ana\_Almeida](https://avatars.discourse-cdn.com/v4/letter/a/bbe5ce/32.png) [@Ana\_Almeida](https://forums.fusetools.com/u/Ana_Almeida)\
**Post date:** [January 18, 2018, 11:18am UTC](https://forums.fusetools.com/t/drag-and-drop-component-between-pages/6863/3 "2018-01-18T11:18:10Z")

</div>

Hello Uldis,

so just to see if it was possible I combined this examples:

- [Tabs using LayoutMaste](https://www.fusetools.com/examples/tabs-layoutmaster)
- [EnteredForceField](https://www.fusetools.com/docs/fuse/physics/enteredforcefield)

which resulted in:

```auto
<App Background="#eee">

    <Panel ux:Class="Tab" ClipToBounds="false" Margin="0,0,0,4" Background="#bdc3c7">
        <string ux:Property="Text" />
        <Text Value="{ReadProperty Text}" Color="#FFF" Alignment="Center" />
    </Panel>

    <Rectangle ux:Name="indicator" LayoutMaster="page1Tab" Alignment="Bottom" Height="4" Color="#6c7a89">
        <LayoutAnimation>
            <Move RelativeTo="WorldPositionChange" X="1" Duration="0.4" Easing="BackIn"/>
        </LayoutAnimation>
    </Rectangle>

    <Text ux:Class="WelcomeText" FontSize="30" Alignment="Center"/>

    <DockPanel>
        <StatusBarBackground Dock="Top" />
        <BottomBarBackground Dock="Bottom" />

        <Grid Dock="Top" ColumnCount="2" Height="50" Background="#bdc3c7">
            <Panel ux:Name="page1Tab">
                <Tab Text="Page 1">
                    <Clicked>
                        <Set navigation.Active="page1" />
                    </Clicked>
                </Tab>
            </Panel>
            <Panel ux:Name="page2Tab">
                <Tab Text="Page 2">
                	<PointAttractor ux:Name="centerAttract" Radius="10" Strength="10" />
                    <Clicked>
                        <Set navigation.Active="page2" />
                    </Clicked>
                </Tab>
            </Panel>
        </Grid>

        <PageControl ux:Name="navigation">
            <Page ux:Name="page1" Background="#eee">
                <WhileActive Threshold="0.5">
                    <Set indicator.LayoutMaster="page1Tab" />
                </WhileActive>
                <WelcomeText>Welcome to Page 1</WelcomeText>
                <Panel Width="60" Height="60" Layer="Overlay">
			        <Circle Color="#42A5F5" />
			        <Draggable />
			        <EnteredForceField ForceField="centerAttract">
			        	<DebugAction Message="Here" />
                        <Set navigation.Active="page2" />
			        </EnteredForceField>
			    </Panel>
            </Page>
            <Page ux:Name="page2" Background="#abb7b7">
                <WhileActive Threshold="0.5">
                    <Set indicator.LayoutMaster="page2Tab" />
                </WhileActive>
                <WelcomeText>Welcome to Page 2</WelcomeText>
            </Page>
        </PageControl>

    </DockPanel>
</App>

```

This has three problems:

- The circle is behind the Tabs, I want it to be in front of it.
- I can change the tab but the circle is kept on the first tab page.
- I can no longer go back to page 1.

Any idea how can I implement this?

Thanks.

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [January 23, 2018, 9:45am UTC](https://forums.fusetools.com/t/drag-and-drop-component-between-pages/6863/4 "2018-01-23T09:45:25Z")

</div>

We’ve played around with it a little, and here’s something you can try:

```auto
<App Background="#eee">
    <Panel ux:Class="Tab" ClipToBounds="false" Margin="0,0,0,4" Background="#bdc3c7">
        <string ux:Property="Text" />
        <Text Value="{ReadProperty Text}" Color="#FFF" Alignment="Center" />
    </Panel>

    <Rectangle ux:Name="indicator" LayoutMaster="page1Tab" Alignment="Bottom" Height="4" Color="#6c7a89">
        <LayoutAnimation>
            <Move RelativeTo="WorldPositionChange" X="1" Duration="0.4" Easing="BackIn" />
        </LayoutAnimation>
    </Rectangle>

    <Text ux:Class="WelcomeText" FontSize="30" Alignment="Center" />

    <DockPanel>
        <StatusBarBackground Dock="Top" />
        <BottomBarBackground Dock="Bottom" />

        <Grid Dock="Top" ColumnCount="2" Height="50" Background="#bdc3c7">
            <Panel ux:Name="page1Tab">
                <Tab Text="Page 1">
                    <PointAttractor ux:Name="page1Attract" Radius="60" Strength="60" />
                    <Clicked>
                        <Set navigation.Active="page1" />
                    </Clicked>
                </Tab>
            </Panel>
            <Panel ux:Name="page2Tab">
                <Tab Text="Page 2">
                    <PointAttractor ux:Name="page2Attract" Radius="60" Strength="60" />
                    <Clicked>
                        <Set navigation.Active="page2" />
                    </Clicked>
                </Tab>
            </Panel>
        </Grid>

        <PageControl ux:Name="navigation" Active="page1">
            <Page ux:Name="page1" Background="#eee">
                <WhileActive Threshold="0.5">
                    <Set indicator.LayoutMaster="page1Tab" />
                </WhileActive>
                <WelcomeText>Welcome to Page 1</WelcomeText>
            </Page>
            <Page ux:Name="page2" Background="#abb7b7">
                <WhileActive Threshold="0.5">
                    <Set indicator.LayoutMaster="page2Tab" />
                </WhileActive>
                <WelcomeText>Welcome to Page 2</WelcomeText>
            </Page>
        </PageControl>

        <Panel Width="60" Height="60" Alignment="Center" Layer="Overlay">
            <Circle Color="#42A5F5" />
            <Draggable />
            <EnteredForceField ForceField="page1Attract">
                <Set navigation.Active="page1" />
            </EnteredForceField>
            <EnteredForceField ForceField="page2Attract">
                <Set navigation.Active="page2" />
            </EnteredForceField>
        </Panel>
    </DockPanel>
</App>

```