{"id":15487041,"url":"https://github.com/rickstrahl/vue-mover","last_synced_at":"2025-04-22T15:41:13.493Z","repository":{"id":66331216,"uuid":"106347514","full_name":"RickStrahl/vue-mover","owner":"RickStrahl","description":"A 2 list mover component implemented as a VueJs Component","archived":false,"fork":false,"pushed_at":"2019-01-14T17:00:24.000Z","size":1181,"stargazers_count":19,"open_issues_count":8,"forks_count":9,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-17T04:19:24.830Z","etag":null,"topics":["component","list-selection","mover","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RickStrahl.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"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":"2017-10-09T23:59:53.000Z","updated_at":"2024-03-22T13:39:21.000Z","dependencies_parsed_at":"2023-04-06T00:33:32.026Z","dependency_job_id":null,"html_url":"https://github.com/RickStrahl/vue-mover","commit_stats":{"total_commits":23,"total_committers":1,"mean_commits":23.0,"dds":0.0,"last_synced_commit":"3cf9617a6f234ec44516a54b250238c9d80288c5"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RickStrahl%2Fvue-mover","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RickStrahl%2Fvue-mover/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RickStrahl%2Fvue-mover/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RickStrahl%2Fvue-mover/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RickStrahl","download_url":"https://codeload.github.com/RickStrahl/vue-mover/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250269905,"owners_count":21402958,"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":["component","list-selection","mover","vuejs"],"created_at":"2024-10-02T06:20:56.632Z","updated_at":"2025-04-22T15:41:13.470Z","avatar_url":"https://github.com/RickStrahl.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue-Mover\n\nA simple list picker vue-component, with drag and drop and sortable items. Uses sortable.js for the \n\n\n* [Try it out](https://rawgit.com/RickStrahl/vue-mover/master/moverComponentSample.html)\n\nSupport:\n\n* Moving items between two list displays\n* Drag and drop or use movers\n* Drag and drop sorting\n\n![](vue-mover.png)\n\n@icon-info-circle\n\n\n### Syntax:\nInside of a Vue application use this markup:\n\n```html\n\u003cscript src=\"scripts/vue.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"scripts/Sortable.min.js\"\u003e\u003c/script\u003e    \n\u003cscript src=\"vue-mover.js\"\u003e\u003c/script\u003e\n\n\u003cmover \n     target-id=\"MyMover\"\n     :left-items=\"selectedItems\"\n     :right-items=\"unselectedItems\"\n     title-left=\"Available Items\"\n     title-right=\"Selected Items\"\n     moved-item-location=\"top | bottom\"\n     @item-moved=\"itemMovedHandler\"\n     \u003e\n\u003c/mover\u003e\n```\n\nwhere **left** and **right** items are array properties on the view model.\n\nTo set up the model load:\n\n```\nvar vm = {\n  pageTitle: \"Vue Mover Component Sample\",\n  unselectedItems: [\n    {\n        value: \"vitem1\",\n        displayValue: \"vItem 1\",\n        isSelected: false\n    },\n    {\n        value: \"vitem2\",\n        displayValue: \"vItem 2\",\n        isSelected: true\n    },\n    {\n        value: \"vitem3\",\n        displayValue: \"vItem 3\",\n        isSelected: false\n    },\n    {\n        value: \"vitem4\",\n        displayValue: \"vItem 4\",\n        isSelected: false\n    },\n    {\n        value: \"vitem5\",\n        displayValue: \"vItem 5\",\n        isSelected: false\n    }\n  ],\n  selectedItems: [\n    {\n        value: \"xitem3\",\n        displayValue: \"xItem 3\",\n        isSelected: false\n    },\n    {\n        value: \"xitem4\",\n        displayValue: \"xItem 4\",\n        isSelected: false\n    }\n  ],    \n  // demonstrate retrieving items\n  saveItems: function() {\n    var s = \"\";\n    for (var i = 0; i \u003c vm.selectedItems.length; i++) {\n      var element = vm.selectedItems[i];\n      s += element.displayValue + \"\\r\\n\";\n    }\n\n    alert('ready to save ' + vm.selectedItems.length + \n         ' items.\\r\\n' + s);\n  }\n} \n\nvar app = new Vue({\n      el: \"#Body\",\n      data: function() { return vm; }\n});\n```\n\n### Multiple Movers\nYou can drop multiple movers on the page. If you do be sure to give each mover a seperate `target-id` and a `group-name`:\n\n```html\n\u003cmover :left-items=\"unselectedItems2\" \n       :right-items=\"selectedItems2\"\n       target-id=\"Mover2\"\u003e\u003c/mover\u003e  \n```\n\n`targetId` is required for a second mover to ensure that each gets its own unique scope.\n\n### Use without Font-Awesome\nBy default the mover uses Font-Awesome icons for the mover buttons. If you don't use Font Awesome in your app and you don't want to add it, you can turn off use of Font awesome with:\n\n```html\n\u003cmover :font-awesome=false\u003e\u003c/mover\u003e\n```\n\nNote the binding requirement (:) in front.\n\n### Styling\nYou can override the styling of the various styles in the `vue-mover.css` style sheet. The mover overall should be self contained, but the height is probably one you'll want to adjust:\n\n```html\n\u003cstyle\u003e\n    /* override panel height */\n    #Mover .mover-panel {\n        height: 500px;\n    }\n    #Mover2 .mover-panel {\n        height: 300px;\n    }\n\u003c/style\u003e\n```\n\nIf you have multiple movers prefix your tags with the mover's target id to keep the CSS separate. The default ID is `Mover`.\n\n#### `item-moved` Event\nThe component fires an ItemMoved event which is fired when an item is moved from left to right or right to left. The event is hooked up with:\n\n```\n@item-moved=\"itemMovedHandler\"\n```\n\nwhich should be mapped to a method on your model:\n\n```js\nitemMovedHandler: function(itemMovedInfo) {\n    var item = itemMovedInfo.item;          // the item that was moved\n    var list = itemMovedInfo.targetList;    // list that was updated\n    var type = itemMovedInfo.listType       // \"left\", \"right\"\n}\n```\n\n\n### Dependencies\n\n* [font-awesome](http://fontawesome.io)\n* [sortable js](http://rubaxa.github.io/Sortable/)\n\n### Build\nOutput is built with WebPack.\n\nTo build use:\n\n```\nnpm run build\n```\n\n### License\n\nLicensed under the MIT License. There's no charge to use, integrate or modify the code for this project. You are free to use it in personal, commercial, government and any other type of application.\n\nAll source code is copyright © Rick Strahl, West Wind Technologies, regardless of changes made to them. Any source code modifications must leave the original copyright code headers intact.\n\nWarranty Disclaimer: No Warranty!\n\nIN NO EVENT SHALL THE AUTHOR, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR REDISTRIBUTE THIS PROGRAM AND DOCUMENTATION, BE LIABLE FOR ANY COMMERCIAL, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE PROGRAM INCLUDING, BUT NOT LIMITED TO, LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR LOSSES SUSTAINED BY THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS, EVEN IF YOU OR OTHER PARTIES HAVE BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.\n\n### Change Log\n\n#### 0.3.2\n\n* **Add `item-moved` Event**  \nAdd `item-moved` event that captures an object that returns the item moved, the target list it was dropped into and the list type (left or right).\n\n#### 0.3.0\n\n* **Add moved-item-location Attribute**   \nAdded an `move-item-location` Attribute that determines whether items that are moved using the mover buttons are added at the `top` of `bottom` of the individual lists.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frickstrahl%2Fvue-mover","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frickstrahl%2Fvue-mover","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frickstrahl%2Fvue-mover/lists"}