{"id":30044451,"url":"https://github.com/javidgulmaliyev/movablement","last_synced_at":"2026-05-10T16:03:37.435Z","repository":{"id":280853869,"uuid":"943391799","full_name":"javidgulmaliyev/movablement","owner":"javidgulmaliyev","description":"\u003cmovable-element\u003e is a custom HTML element that allows you to automatically or manually move an element in the DOM relative to another element (target) based on specified attributes. The element can be moved to various positions relative to the target element. Automatic movement occurs only under certain media query conditions.","archived":false,"fork":false,"pushed_at":"2025-03-15T16:04:29.000Z","size":48,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-07T01:26:44.455Z","etag":null,"topics":["custom-element","dom","dynamic","element","frontend","html","javascript","manipulation","media-query","movable","movable-element","movablement","position","reorder","responsive","web-component"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/javidgulmaliyev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-05T16:25:17.000Z","updated_at":"2025-03-15T16:04:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"3e16beb8-4824-46b2-b5db-d3962f405fed","html_url":"https://github.com/javidgulmaliyev/movablement","commit_stats":null,"previous_names":["javidrashkhansoi/movablement","javidgulmaliyev/movablement"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/javidgulmaliyev/movablement","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javidgulmaliyev%2Fmovablement","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javidgulmaliyev%2Fmovablement/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javidgulmaliyev%2Fmovablement/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javidgulmaliyev%2Fmovablement/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javidgulmaliyev","download_url":"https://codeload.github.com/javidgulmaliyev/movablement/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javidgulmaliyev%2Fmovablement/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269207445,"owners_count":24378474,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-07T02:00:09.698Z","response_time":73,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-element","dom","dynamic","element","frontend","html","javascript","manipulation","media-query","movable","movable-element","movablement","position","reorder","responsive","web-component"],"created_at":"2025-08-07T06:03:02.321Z","updated_at":"2026-05-10T16:03:37.348Z","avatar_url":"https://github.com/javidgulmaliyev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![\u003cmovable-element\u003e](https://raw.githubusercontent.com/javidrashkhansoi/movablement/refs/heads/main/src/images/movable-element.png)\n\n![License](https://img.shields.io/github/license/javidrashkhansoi/movablement?label=LICENSE\u0026labelColor=%238b8c8d\u0026color=%23a41931)\n![Static Badge](https://img.shields.io/badge/Types-Included-%233178c6?logo=typescript\u0026logoColor=%233178c6\u0026labelColor=white)\n[![Socket Badge](https://socket.dev/api/badge/npm/package/movablement/2.1.1)](https://socket.dev/npm/package/movablement/overview/2.1.1)\n\n[![NPM Version](https://img.shields.io/npm/v/movablement?logo=npm\u0026logoColor=%23cb0000\u0026labelColor=%23231f20\u0026color=%23cb0000)](https://www.npmjs.com/package/movablement)\n[![NPM Downloads](https://img.shields.io/npm/dw/movablement?logo=npm\u0026logoColor=%23cb0000\u0026labelColor=%23231f20\u0026color=%23cb0000)](https://www.npmjs.com/package/movablement)\n[![NPM gzip size](https://img.shields.io/bundlejs/size/movablement?logo=npm\u0026logoColor=%23cb0000\u0026label=gzip\u0026labelColor=%23231f20\u0026color=%23cb0000)](https://www.npmjs.com/package/movablement)\n\n[![Static Badge](https://img.shields.io/badge/DEMO-CodePen-white?logo=codepen\u0026logoColor=white\u0026labelColor=%23080808)](https://codepen.io/collection/PooLNJ)\n\n- [Installation](#installation)\n- [Attributes](#attributes)\n- [Properties](#properties)\n- [Methods](#methods)\n- [Parameters](#parameters)\n- [Events](#events)\n- [Usage](#usage-examples)\n- [License](#license)\n\n\n# `\u003cmovable-element\u003e`\n\n`\u003cmovable-element\u003e` is a custom **HTML** element that allows you to automatically or manually move an element in the **DOM** relative to another element (target) based on specified attributes. The element can be moved to various positions relative to the target element, such as `start`, `end`, `before`, `after`, `replace`, and `swap`. Automatic movement occurs only under certain media query conditions (e.g., when the screen size changes).\n\n## Installation\n\nTo use `\u003cmovable-element\u003e` in your project, you can install it using one of the following package managers:\n\n**npm**\n```bash\nnpm install movablement\n```\n\n**yarn**\n```bash\nyarn add movablement\n```\n\n**pnpm**\n```bash\npnpm add movablement\n```\n\nAfter installation, import the element into your project:\n\n```javascript\nimport \"movablement\";\n```\n\n## Attributes\n\n- `target`: **ID** of the target element without the `#` prefix, relative to which the current element will be moved. Required attribute if the `manual` attribute is not specified.\n- `to`: The position to which the element will be moved relative to the target element. Possible values:\n  - `start` — move the element to the beginning of the target element.\n  - `end` — move the element to the end of the target element. **Default value**.\n  - `before` — move the element before the target element.\n  - `after` — move the element after the target element.\n  - `replace` — replace the target element with the current element.\n  - `swap` — swap the current element and the target element.\n  - an integer value — move the element to a specific position among the child elements of the target element. `0` — first child element, `-1` — last child element, etc.\n- `media`: The media query under which the element will be moved. By default, `(max-width: 768px)` is used.\n- `manual`: If set, the element will not move automatically. Movement will occur only when the `move()`, `return()`, or `toggle()` methods are called.\n\n\n## Properties\n\n- `isMoved`: A getter that returns `true` if the element is moved and `false` if the element is not moved.\n\n## Methods\n\n- `init(attributes?)`: Initializes the element with the specified attributes. If the element already has a `target` attribute and the target element is found, initialization occurs automatically.\n- `destroy(isReturn?)`: Completely deinitializes the element.\n- `reinit(attributes?, isReturn?)`: Reinitializes the element with new attributes.\n- `move()`: Manually moves the element to the position specified in the `to` attribute.\n- `return()`: Manually returns the element to its original place in the **DOM**.\n- `toggle()`: Toggles between moving and returning the element.\n\n\n## Parameters\n\n### `isReturn` in the `destroy()` and `reinit()` methods\n\nIf `isReturn` is set to `true`, the element will be returned to its original place in the **DOM**.\n\n\n### `attributes` in the `init()` and `reinit()` methods\n\n- `targetID` (optional): A string containing the **ID** of the target element without the `#` prefix, relative to which the current element will be moved. If the element already has a `target` attribute, this parameter will overwrite it.\n- `media` (optional): A string containing the media query under which the element will be moved. If the element already has a `media` attribute, this parameter will overwrite it. By default, `(max-width: 768px)` is used.\n- `to` (optional): A string defining the position to which the element will be moved relative to the target element. Possible values: `start`, `end`, `before`, `after`, `replace`, `swap`, or a numeric value to specify the position among the child elements of the target element. If the element already has a `to` attribute, this parameter will overwrite it. By default, `end` is used.\n- `manual` (optional): A boolean value (`true` or `false`) that determines whether the element will move automatically or manually. If set to `true`, the element will not move automatically, and the `move()`, `return()`, or `toggle()` methods will need to be called to move it. If the element already has a `manual` attribute, this parameter will overwrite it. By default, `true` is used.\n\n\u003e :information_source: When to use the `init()` or `reinit()` method?\n\u003e - Element initialization: When first using the element, if you want to set attributes programmatically rather than through **HTML**.\n\u003e - Changing settings: If you need to change the element's attributes dynamically (e.g., in response to user actions or changes in the application).\n\u003e - Manual control: If you want to temporarily disable automatic movement and control the element manually.\n\n## Events\n\n- `before-movable-element-move`: Fires before the element is moved.\n- `after-movable-element-move`: Fires after the element is moved.\n- `before-movable-element-return`: Fires before the element is returned.\n- `after-movable-element-return`: Fires after the element is returned.\n\n## Usage Examples\n\n**You can see live examples of using `\u003cmovable-element\u003e` on *[CodePen](https://codepen.io/collection/PooLNJ)*.**\n\n### Example 1: Automatic element movement\n\n```html\n\u003cdiv id=\"target\"\u003e\n  \u003cp\u003eTarget element content\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cmovable-element target=\"target\" to=\"start\"\u003e\n  Movable element\n\u003c/movable-element\u003e\n```\n\nIn this example, the `\u003cmovable-element\u003e` will automatically move to the beginning of the element with the **ID** `target` when the screen width is less than or equal to **768px**.\n\n### Example 2: Manual movement control\n\n**HTML**\n```html\n\u003cdiv class=\"buttons\"\u003e\n  \u003cbutton class=\"buttons__move\"\u003eMove\u003c/button\u003e\n  \u003cbutton class=\"buttons__return\"\u003eReturn\u003c/button\u003e\n  \u003cbutton class=\"buttons__toggle\"\u003eToggle\u003c/button\u003e\n\u003c/div\u003e\n\n\u003cdiv id=\"target\"\u003e\n  \u003cp\u003eTarget element content\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cmovable-element target=\"target\" to=\"after\" manual\u003e\n  Movable element\n\u003c/movable-element\u003e\n```\n\n**JavaScript**\n```javascript\nconst movableElement = document.querySelector(\"movable-element\");\n\nconst moveButton = document.querySelector(\".buttons__move\");\nconst returnButton = document.querySelector(\".buttons__return\");\nconst toggleButton = document.querySelector(\".buttons__toggle\");\n\nmoveButton.addEventListener(\"click\", () =\u003e {\n  movableElement.move();\n});\n\nreturnButton.addEventListener(\"click\", () =\u003e {\n  movableElement.return();\n});\n\ntoggleButton.addEventListener(\"click\", () =\u003e {\n  movableElement.toggle();\n});\n```\n\nIn this example, the `\u003cmovable-element\u003e` will be moved after the element with the **ID** `target` only when the **\"Move\"** button is clicked. The **\"Return\"** button will return the element to its original place, and the **\"Toggle\"** button will switch between moving and returning the element.\n\n### Example 3: Using the `init()` and `reinit()` methods\n\n**HTML**\n```html\n\u003cdiv id=\"target-element-1\"\u003e\n  \u003cp\u003eFirst target element content\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv id=\"target-element-2\"\u003e\n  \u003cp\u003eSecond target element content\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cmovable-element manual\u003e\n  Movable element\n\u003c/movable-element\u003e\n```\n\n**JavaScript**\n```javascript\nconst movableElement = document.querySelector(\"movable-element\");\n\n// Initialize the element with parameters\nmovableElement.init({\n  targetID: \"target-element-1\",\n  media: \"(min-width: 1024px)\",\n  to: \"start\",\n  manual: false\n});\n\n// Reinitialize with new parameters\nmovableElement.reinit({\n  targetID: \"target-element-2\",\n  to: -1,\n  manual: true\n});\n```\n\n### Example 4: Using events\n\n```javascript\nconst movableElement = document.querySelector(\"movable-element\");\n\nmovableElement.addEventListener(\"before-movable-element-move\", (event) =\u003e {\n  console.log(\"Element will be moved\", event.detail.element);\n});\n\nmovableElement.addEventListener(\"after-movable-element-move\", (event) =\u003e {\n  console.log(\"Element was moved\", event.detail.element);\n});\n```\n\n## License\n\nThis project is licensed under the **MIT** License. See the *[LICENSE](LICENSE)* file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavidgulmaliyev%2Fmovablement","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavidgulmaliyev%2Fmovablement","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavidgulmaliyev%2Fmovablement/lists"}