# Floating Components

**URL:** <https://forum.inductiveautomation.com/t/floating-components/538>\
**Category:** Archived Topics\
**Created:** [February 8, 2008, 5:41pm UTC](https://forum.inductiveautomation.com/t/floating-components/538 "2008-02-08T17:41:17Z")\
**Posts on this page:** 3\
**Page:** 2

<div class="post-metadata">

**Author:** ![Carl.Gould](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/carl.gould/32/7262_2.png) [@Carl.Gould](https://forum.inductiveautomation.com/u/Carl.Gould)\
**Post date:** [February 28, 2008, 5:47pm UTC](https://forum.inductiveautomation.com/t/floating-components/538/21 "2008-02-28T17:47:20Z")

</div>

I was referring to the client’s resources.

I get it now - an oversized container that you drag around - neat! What a cool idea… I bet its a pain to work with in the designer though!

---

<div class="post-metadata">

**Author:** ![brian.kehn](https://avatars.discourse-cdn.com/v4/letter/b/bbe5ce/32.png) [@brian.kehn](https://forum.inductiveautomation.com/u/brian.kehn)\
**Post date:** [February 13, 2018, 12:38am UTC](https://forum.inductiveautomation.com/t/floating-components/538/22 "2018-02-13T00:38:16Z")

</div>

Could you re-post the draggable component code?

I am struggling to make a custom slider with a draggable button. So far I have a mouseMotion/mouseDragged script on a button:

```auto
button = event.source.parent.getComponent('MyButton')
system.gui.transform(button,event.x,event.y)

```

But this transforms the button to the top left of the container. Once i can move it relative to the mouse position, I’ll have to add a few lines of logic to restrict its travel in the x-direction entirely, and in the y-direction inside the bounds of my (background) slider rail.  
Thanks!

---

<div class="post-metadata">

**Author:** ![Claus\_Nielsen](https://avatars.discourse-cdn.com/v4/letter/c/77aa72/32.png) [@Claus\_Nielsen](https://forum.inductiveautomation.com/u/Claus_Nielsen)\
**Post date:** [February 16, 2018, 4:18am UTC](https://forum.inductiveautomation.com/t/floating-components/538/23 "2018-02-16T04:18:42Z")

</div>

Was trying to make a dragable component aswell and failed to get the code aswell.  
My solution ended up being something like this and it works very well.

In the mouse pressed event add the following code:

```auto
event.source.mouseX = event.x
event.source.mouseY = event.y

```

The code expects two custom properties on the component, `integer mouseX` and `integer mouseY`.  
Next, in the mouse dragged event on the component add the code

```auto
mousePosition = event.source.parent.getMousePosition()

if mousePosition:
	newX = mousePosition.x - event.source.mouseX
	newY = mousePosition.y - event.source.mouseY
	system.gui.transform(event.source, newX=newX, newY=newY)

```

[Previous page](https://forum.inductiveautomation.com/t/floating-components/538.md?page=1)