# Coordinate container move icon in client

**URL:** <https://forum.inductiveautomation.com/t/coordinate-container-move-icon-in-client/78209>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [August 22, 2023, 10:07am UTC](https://forum.inductiveautomation.com/t/coordinate-container-move-icon-in-client/78209 "2023-08-22T10:07:34Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![flavien](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@flavien](https://forum.inductiveautomation.com/u/flavien)\
**Post date:** [August 22, 2023, 10:07am UTC](https://forum.inductiveautomation.com/t/coordinate-container-move-icon-in-client/78209/1 "2023-08-22T10:07:34Z")

</div>

Hi,

In perspective client, user would like to move an icon placed in a coordinate container.  
Is it possible ? Not in designer but in client.

Thanks

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 22, 2023, 12:03pm UTC](https://forum.inductiveautomation.com/t/coordinate-container-move-icon-in-client/78209/2 "2023-08-22T12:03:05Z")

</div>

here is some magic 😉  
[dnd.zip](https://forum.inductiveautomation.com/uploads/short-url/bvLYyYAYLxDScMyMBY2rKLwBwcA.zip) (6.1 KB)

> **Summary**
>
> ```auto
> {
> "custom": {
> "droppedData": {
> "offsetX": 165,
> "offsetY": 247
> }
> },
> "params": {},
> "propConfig": {
> "custom.droppedData": {
> "persistent": true
> }
> },
> "props": {},
> "root": {
> "children": [
> {
> "meta": {
> "name": "Markdown"
> },
> "position": {
> "height": 200,
> "width": 200,
> "x": 69,
> "y": 399
> },
> "propConfig": {
> "props.source": {
> "binding": {
> "config": {
> "struct": {
> "coordId": "{../CoordinateContainer.meta.domId}",
> "iconId": "{../CoordinateContainer/Icon.meta.domId}",
> "rootId": "{parent.meta.domId}"
> },
> "waitOnAll": true
> },
> "transforms": [
> {
> "code": "\t#make the propName the key to write too in the view.custom \n\tpropName \u003d \"droppedData\"\n\tcode \u003d \"\"\"\u003cimg style\u003d\u0027display:none\u0027 src\u003d\u0027/favicon.ico\u0027 onload\u003d\\\"\n\t\tconst view \u003d [...window.__client.page.views._data.values()].find(view \u003d\u003e view.value.mountPath \u003d\u003d this.parentNode.parentNode.parentNode.getAttributeNode(\u0027data-component-path\u0027).value.split(\u0027.\u0027)[0]).value; \n\t\tfunction ondrop(ev) {\n\t\t\tev.preventDefault(); \t\t\t\t\t\t\n\t\t\tview.custom.write(\u0027\"\"\"+propName+\"\"\"\u0027,{\u0027offsetX\u0027:ev.offsetX,\u0027offsetY\u0027:ev.offsetY});\n\t\t};\n\t\tfunction ondragstart(ev){\t\t\t\n\t\t\tconst icon \u003d document.getElementById(\u0027\"\"\"+value.iconId+\"\"\"\u0027);\n\t\t\tev.dataTransfer.setDragImage(icon, 0, 0);\n\t\t};\n\t\tfunction ondragover(ev){\n\t\t\tev.preventDefault();\n\t\t};\n\t\tconst coord \u003d document.getElementById(\u0027\"\"\"+value.coordId+\"\"\"\u0027);\t\t\n\t\tcoord.setAttribute(\u0027draggable\u0027,true);\n\t\tcoord.ondragstart \u003d ondragstart;\n\t\tconst rootView \u003d document.getElementById(\u0027\"\"\"+value.rootId+\"\"\"\u0027);\n\t\trootView.ondragover \u003d ondragover;\n\t\trootView.ondrop \u003d ondrop;\t\t\t\t\n\t\\\"\u003e\u003c/img\u003e\"\"\".replace(\"\\n\", \"\").replace(\"\\t\", \"\")\n\treturn code\n\t",
> "type": "script"
> }
> ],
> "type": "expr-struct"
> }
> }
> },
> "props": {
> "markdown": {
> "escapeHtml": false
> },
> "style": {
> "flex": "--neutral-40"
> }
> },
> "type": "ia.display.markdown"
> },
> {
> "children": [
> {
> "meta": {
> "domId": "iconId",
> "name": "Icon"
> },
> "position": {
> "height": 30,
> "width": 30
> },
> "props": {
> "path": "material/insert_emoticon"
> },
> "type": "ia.display.icon"
> }
> ],
> "meta": {
> "domId": "containerId",
> "name": "CoordinateContainer"
> },
> "position": {
> "height": 31,
> "width": 30
> },
> "propConfig": {
> "position.x": {
> "binding": {
> "config": {
> "path": "view.custom.droppedData.offsetX"
> },
> "type": "property"
> }
> },
> "position.y": {
> "binding": {
> "config": {
> "path": "view.custom.droppedData.offsetY"
> },
> "type": "property"
> }
> }
> },
> "type": "ia.container.coord"
> }
> ],
> "meta": {
> "domId": "targetId",
> "name": "root"
> },
> "type": "ia.container.coord"
> }
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![flavien](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@flavien](https://forum.inductiveautomation.com/u/flavien)\
**Post date:** [August 22, 2023, 1:28pm UTC](https://forum.inductiveautomation.com/t/coordinate-container-move-icon-in-client/78209/3 "2023-08-22T13:28:45Z")

</div>

Thanks it seems to works for my use case.