# Dragging & moving object in window **URL:** \ **Category:** Ignition\ **Created:** [November 18, 2018, 11:50am UTC](https://forum.inductiveautomation.com/t/dragging-moving-object-in-window/20927 "2018-11-18T11:50:46Z")\ **Posts on this page:** 16\ **Page:** 1
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [November 18, 2018, 11:50am UTC](https://forum.inductiveautomation.com/t/dragging-moving-object-in-window/20927/1 "2018-11-18T11:50:46Z")
Hi, I want to move a template object in run-time. I use mouseDragged event with following code on template: x = event.x y = event.y system.gui.transform(event.source,x,y) what happens is the template moves (even blinking while moved) in the middle position between the original position and the mouse position randomly, that is not on the current mouse position. Note: that this behavior is not present if the script is put on a simple drawing object like rectangle. I even test different setting for object layout relative & anchored but nothing changed. what is wrong with my code? thanks. ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [November 18, 2018, 2:13pm UTC](https://forum.inductiveautomation.com/t/dragging-moving-object-in-window/20927/2 "2018-11-18T14:13:23Z")
The x,y location in the event is relative to the origin of the component. The x,y location needed for transform() must be relative to the component’s container. For smooth motion, you will also need to capture and adjust for the x,y offset from the beginning of the drag. ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [November 18, 2018, 4:31pm UTC](https://forum.inductiveautomation.com/t/dragging-moving-object-in-window/20927/3 "2018-11-18T16:31:58Z")
> [@pturmel](#): > > capture Hi Phil I use these code, this time it move smoothly but with some constant offset. When I press and hold click, the template jump an offset from mouse pointer and when I move mouse it move accordingly with constant offset. point = system.gui.convertPointToScreen(event.x, event.y, event) system.gui.transform(event.source, point[0], point[1]) Do I miss anything? I guess it is because of screen scaling. I also change layout to anchor but nothing is change. ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [November 18, 2018, 7:00pm UTC](https://forum.inductiveautomation.com/t/dragging-moving-object-in-window/20927/4 "2018-11-18T19:00:58Z")
You don’t want to convert to screen coordinates, but to the container’s coordinates. ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [November 18, 2018, 7:16pm UTC](https://forum.inductiveautomation.com/t/dragging-moving-object-in-window/20927/5 "2018-11-18T19:16:30Z")
could you please tell me how? the event.x, event.y is coordinate related to the container which the template here. I use mouseDragged event on the container so it’s container’s coordinates. ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [November 18, 2018, 7:35pm UTC](https://forum.inductiveautomation.com/t/dragging-moving-object-in-window/20927/6 "2018-11-18T19:35:52Z")
> [@nader.chinichian](#): > > I use mouseDragged event on the container so it's container's coordinates. Ah, reverse of what I thought. So you need to compute and save the offset from the startDrag/mousePress x,y location to the origin of the template you are moving. Then subtract that from event x,y in mouseDragged to get the new origin of the template you are moving. ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [November 19, 2018, 4:43am UTC](https://forum.inductiveautomation.com/t/dragging-moving-object-in-window/20927/7 "2018-11-19T04:43:11Z")
![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/2/2a8588fd23fb940efbbb1ec723dca03b3b8d900e.jpg) no luck I get back to my first state which indicate there is bug here. I even use event.source.getBounds().bounds.getX() to get correct location with no luck. I print event.x and event.y and I get negative value even my mouse is within the screen!!! ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [November 19, 2018, 4:50am UTC](https://forum.inductiveautomation.com/t/dragging-moving-object-in-window/20927/8 "2018-11-19T04:50:58Z")
I just add constant offset with try and error and it’'s work the problem is in run time, the window is scaling so this offset get wrong again and add new offset. point = system.gui.convertPointToScreen(event.x, event.y, event) system.gui.transform(event.source, point[0]-400, point[1]-95) it seems easy but nothing works correct and I’m sure there is bug. ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [November 19, 2018, 1:18pm UTC](https://forum.inductiveautomation.com/t/dragging-moving-object-in-window/20927/9 "2018-11-19T13:18:36Z")
Show the complete scripts for mousePressed, mouseReleased, and mouseDragged. Please use triple-backquote above and below each script so they format nicely. ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [November 20, 2018, 6:04am UTC](https://forum.inductiveautomation.com/t/dragging-moving-object-in-window/20927/10 "2018-11-20T06:04:26Z")
I upload the window with its script for you to see the problem in action. Just try to dragged and move the component in designer and client view. [Nader\_About\_2018-11-20\_0932.proj](https://us1.discourse-cdn.com/inductiveautomation/original/2X/d/da6a5cc5149116d950269020827c0d3671a76ffc.proj) (5.1 KB) ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [November 21, 2018, 7:29am UTC](https://forum.inductiveautomation.com/t/dragging-moving-object-in-window/20927/11 "2018-11-21T07:29:31Z")
I use system.gui.getParentWindow(event).mousePosition.getX()instead of using event.x method and now it’s working. The only issue left is why mouse pointer jump to left top corner of the object? I want mouse stay where I click and dragged on object for the first time and stay fix related to object. I attach a video to show what I want. I did it on other SCADA software and I want to do it in ignition. [https:/uploads/iatesting/original/2X/4/4b05ba66da699b72e7690d8f0b892671a283ad8a.mp4](https:/uploads/iatesting/original/2X/4/4b05ba66da699b72e7690d8f0b892671a283ad8a.mp4) ---
**Author:** ![jasko](https://avatars.discourse-cdn.com/v4/letter/j/a3d4f5/32.png) [@jasko](https://forum.inductiveautomation.com/u/jasko)\ **Post date:** [November 21, 2018, 9:43am UTC](https://forum.inductiveautomation.com/t/dragging-moving-object-in-window/20927/12 "2018-11-21T09:43:40Z")
Your component needs two offset custom properties. I added on your example component this two x\_offset, y\_offset. Then in the mousePressed event script: ```auto event.source.x_offset = event.x event.source.y_offset = event.y ``` and in the mouseDragged: ```auto x = system.gui.getParentWindow(event).mousePosition.getX() y = system.gui.getParentWindow(event).mousePosition.getY() system.gui.transform(event.source, x - event.source.x_offset, y - event.source.y_offset, coorSpace=system.gui.COORD_DESIGNER) ``` ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [November 21, 2018, 10:06am UTC](https://forum.inductiveautomation.com/t/dragging-moving-object-in-window/20927/13 "2018-11-21T10:06:51Z")
Thanks Jasko It works perfectly. The mouseDragged event has event.x event.y which show the current position of mouse. Could you explain to me why event.x event.y doesn’t work in mouseDragged and I should use system.gui.getParentWindow(event).mousePosition.getX() instead? ---
**Author:** ![jasko](https://avatars.discourse-cdn.com/v4/letter/j/a3d4f5/32.png) [@jasko](https://forum.inductiveautomation.com/u/jasko)\ **Post date:** [November 21, 2018, 11:00am UTC](https://forum.inductiveautomation.com/t/dragging-moving-object-in-window/20927/14 "2018-11-21T11:00:31Z")
As far as I know. The event.x and event.y in mouseDragged are the same as in mousePressed, but this is just the offset (mouse position on the component). It is not the position of the component itself. That would be event.source.x and event.source.y But if you use this two for your transform function, it also won’t work, because you would be adding the offset to the actual position of the component in x and y-direction. Lets assume the x and y position are at start 100, and the x\_offset = 61 and y\_offset = 17. If you now drag your mouse, so the function executes 3 times, then the position of the template would be on each iteration: start: 100 100 it1: 161 117 it2: 222 134 it3: 283 151 But this is dragging the component only to the right and down, so it doesn’t matter where you dragging. So the only way to drag the component to where the mouse is is to make the position of the component dependent on the position of the mouse. Because of that, you have to use those functions. ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [November 21, 2018, 12:03pm UTC](https://forum.inductiveautomation.com/t/dragging-moving-object-in-window/20927/15 "2018-11-21T12:03:29Z")
Now I try to limit user movement between x axis between -150 and 0 according the object.(top left corner coordinate) I use many different if else statement which check object x position (event.source.getBounds().getX()). The problem is like before there may random jump. I cant fiqure it out how to fix this. Could you please modify the code so it limit x position between -150 to 0 like slider? ---
**Author:** ![jasko](https://avatars.discourse-cdn.com/v4/letter/j/a3d4f5/32.png) [@jasko](https://forum.inductiveautomation.com/u/jasko)\ **Post date:** [November 21, 2018, 12:32pm UTC](https://forum.inductiveautomation.com/t/dragging-moving-object-in-window/20927/16 "2018-11-21T12:32:45Z")
I will give you this. A way to bound the drag of the component to a specific area. For this you need the star x position (x\_pos) start y position (y\_pos). You also need the positive and negative limits of x and y (x\_pos\_limit, x\_neg\_limit, y\_pos\_limit and y\_neg\_limit) All this should be properties on your component. Example: x\_pos = 300 y\_pos = 300 x\_pos\_limit = 150 x\_neg\_limit = 150 y\_pos\_limit = 150 y\_neg\_limit = 150 the script in mousedragged: ```auto x = system.gui.getParentWindow(event).mousePosition.getX()-event.source.x_offset y = system.gui.getParentWindow(event).mousePosition.getY()-event.source.y_offset if event.source.x_pos - event.source.x_neg_limit < x < event.source.x_pos + event.source.x_pos_limit: if event.source.y_pos - event.source.y_neg_limit < y < event.source.y_pos + event.source.y_pos_limit: system.gui.transform(event.source, x, y, coorSpace=system.gui.COORD_DESIGNER) ``` Whit this the component can only be moved from 150 to 450 on the x-axis, and also on the y-axis