{"id":19338051,"url":"https://github.com/edgetranslate/simple-moveable","last_synced_at":"2026-02-16T06:02:36.087Z","repository":{"id":117472744,"uuid":"295975126","full_name":"EdgeTranslate/simple-moveable","owner":"EdgeTranslate","description":"Simple and lightweight implementation of moveable API","archived":false,"fork":false,"pushed_at":"2020-11-10T02:22:33.000Z","size":504,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-19T06:57:50.994Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/EdgeTranslate.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-09-16T08:43:28.000Z","updated_at":"2022-11-01T00:29:20.000Z","dependencies_parsed_at":"2023-03-27T22:19:36.186Z","dependency_job_id":null,"html_url":"https://github.com/EdgeTranslate/simple-moveable","commit_stats":{"total_commits":5,"total_committers":3,"mean_commits":"1.6666666666666667","dds":0.6,"last_synced_commit":"bb99b2b50c8bef2942eb1d1f3a5d2e9d797856d1"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EdgeTranslate%2Fsimple-moveable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EdgeTranslate%2Fsimple-moveable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EdgeTranslate%2Fsimple-moveable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EdgeTranslate%2Fsimple-moveable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EdgeTranslate","download_url":"https://codeload.github.com/EdgeTranslate/simple-moveable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250352240,"owners_count":21416461,"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","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":[],"created_at":"2024-11-10T03:16:12.995Z","updated_at":"2026-02-16T06:02:36.046Z","avatar_url":"https://github.com/EdgeTranslate.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# simple moveable\n\n[![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/EdgeTranslate/simple-moveable/blob/master/LICENSE.MIT)\n[![Version](https://img.shields.io/github/release/EdgeTranslate/simple-moveable.svg?label=version)](https://github.com/EdgeTranslate/simple-moveable/releases)\n[![Build Status](https://travis-ci.org/EdgeTranslate/simple-moveable.svg?branch=master)](https://travis-ci.org/EdgeTranslate/simple-moveable)\n\n\nView this page in other languages:\n\n* [简体中文](./docs/README_CN.md)\n\n* [繁體中文](./docs/README_TW.md)\n\n\n## Installation\n\n### npm\n```\nnpm install --save simple-moveable\n```\n\n## How to use\n```js\nimport moveable from \"simple-moveable\";\n\nconst moveableElement = new moveable(element,{\n\tresizable: true,\n\tdraggable: true,\n\tdirections: [s, se, e, ne, n, nw, w, sw,],\n\t/* set threshold value to increase the resize area */\n\t// threshold: { s: 5, se: 5, e: 5, ne: 5, n: 5, nw: 5, w: 5, sw: 5 },\n\t// threshold: { edge:5, corner:5 },\n\tthreshold: 10,\n\t/**\n\t * set thresholdPosition to decide where the resizable area is\n\t * \"in\": the activated resizable area is within the target element\n\t * \"center\": the activated resizable area is half within the target element and half out of the it\n\t * \"out\": the activated resizable area is out of the target element\n\t * a number(0~1): a ratio which determines the how much the the activated resizable area beyond the element\n\t */\n\t// thresholdPosition: \"in\",\n\t// thresholdPosition: \"center\",\n\t// thresholdPosition: \"out\",\n\tthresholdPosition: 0.9\n})\nlet startTranslate = [0, 0];\n/* draggable events*/\nmoveableElement\n.on(\"dragStart\", ({ set }) =\u003e {\n\tset(startTranslate);\n})\n.on(\"drag\", ({ target, translate }) =\u003e {\n\tstartTranslate = translate;\n\ttarget.style.transform = `translate(${translate[0]}px,${translate[1]}px)`;\n}).on(\"dragEnd\",({ translate }) =\u003e {\n\tstartTranslate = translate;\n})\n.on(\"resizeStart\", ({ set }) =\u003e {\n\tset(startTranslate);\n})\n.on(\"resize\", ({ target, width, height, translate, inputEvent }) =\u003e {\n\ttarget.style.width = `${width}px`;\n\ttarget.style.height = `${height}px`;\n\ttarget.style.transform = `translate(${translate[0]}px, ${translate[1]}px)`;\n})\n.on(\"resizeEnd\", ({ translate, width, height, inputEvent, target }) =\u003e {\n\tstartTranslate = translate;\n\ttarget.style.transform = `translate(${translate[0]}px, ${translate[1]}px)`;\n});\n```\n\n## Contact Us\n\nE-mails: [Mark Fenng](mailto:f18846188605@gmail.com)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedgetranslate%2Fsimple-moveable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedgetranslate%2Fsimple-moveable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedgetranslate%2Fsimple-moveable/lists"}