├── .DS_Store ├── .github └── FUNDING.yml ├── .gitignore ├── LICENSE ├── README.md ├── package.json └── src ├── boot └── index.js ├── components ├── QDraggableRow.json ├── QDraggableRow.vue ├── QDraggableRowCollapseArrow.vue ├── QDraggableRows.json └── QDraggableRows.vue ├── helpers ├── rafHelper.js └── sortBy.js └── index.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mesqueeb/quasar-app-extension-draggable/9b31c94023caf12cae3f24475f7f73c93ed54840/.DS_Store -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: mesqueeb 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .thumbs.db 3 | node_modules 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Luca Ban - Mesqueeb 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Quasar extension: Draggable 🚡 2 | 3 | > ARCHIVED: 4 | > When I need similar functionality again in the future I will 5 | > recreate a new project that is framework agnostic. 6 | 7 | A Quasar extension that makes elements draggable and movable with keyboard. 8 | 9 | ### My extensions 10 | 11 | - [draggable](https://github.com/mesqueeb/quasar-app-extension-draggable) 🚡 12 | - [swipe-to-close](https://github.com/mesqueeb/quasar-app-extension-swipe-to-close) ⛸ 13 | 14 | ### Installation 15 | 16 | ``` 17 | quasar ext add draggable 18 | ``` 19 | 20 | ### Demo 21 | 22 | - [live demo](https://quasar-app-extension-draggable.netlify.com/) 23 | - [demo github repository](https://github.com/mesqueeb/quasar-app-extension-draggable-demo) 24 | 25 | 26 | 27 | 28 | 29 | ### Usage 30 | 31 | WIP 32 | 33 | ```html 34 | 37 | 38 | 45 | ``` 46 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quasar-app-extension-draggable", 3 | "version": "0.2.3", 4 | "description": "A Quasar extension that makes elements draggable and movable with keyboard.", 5 | "author": "Luca Ban - Mesqueeb", 6 | "license": "MIT", 7 | "main": "src/index.js", 8 | "scripts": { 9 | "test": "echo \"No test specified\" && exit 0" 10 | }, 11 | "bugs": "https://github.com/mesqueeb/quasar-app-extension-draggable/issues", 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/mesqueeb/quasar-app-extension-draggable.git" 15 | }, 16 | "homepage": "https://github.com/mesqueeb/quasar-app-extension-draggable", 17 | "engines": { 18 | "node": ">= 8.9.0", 19 | "npm": ">= 5.6.0", 20 | "yarn": ">= 1.6.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/boot/index.js: -------------------------------------------------------------------------------- 1 | import QDraggableRows from 'quasar-app-extension-draggable/src/components/QDraggableRows' 2 | import QDraggableRow from 'quasar-app-extension-draggable/src/components/QDraggableRow' 3 | import QDraggableRowCollapseArrow from 'quasar-app-extension-draggable/src/components/QDraggableRowCollapseArrow' 4 | 5 | export default ({ Vue }) => { 6 | Vue.component('QDraggableRows', QDraggableRows) 7 | Vue.component('QDraggableRow', QDraggableRow) 8 | Vue.component('QDraggableRowCollapseArrow', QDraggableRowCollapseArrow) 9 | Vue.component('q-draggable-rows', QDraggableRows) 10 | Vue.component('q-draggable-row', QDraggableRow) 11 | Vue.component('q-draggable-row-collapse-arrow', QDraggableRowCollapseArrow) 12 | } 13 | -------------------------------------------------------------------------------- /src/components/QDraggableRow.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "component", 3 | "props": { 4 | "value": { 5 | "type": "Number", 6 | "desc": "An number representing the depth of your row. This should be used with v-model." 7 | }, 8 | "id": { 9 | "type": "String", 10 | "desc": "Every row must have an id assigned which is the same ID as the QDraggableRows array representing the row order." 11 | }, 12 | "holdToSelect": { 13 | "type": "Boolean", 14 | "desc": "" 15 | }, 16 | "selectedStyle": { 17 | "type": "Object", 18 | "desc": "" 19 | }, 20 | "hoverStyle": { 21 | "type": "Object", 22 | "desc": "" 23 | } 24 | }, 25 | "slots": { 26 | "default": { 27 | "desc": "The default slot is the content of your actual row." 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /src/components/QDraggableRow.vue: -------------------------------------------------------------------------------- 1 | 48 | 49 | 111 | 112 | 486 | -------------------------------------------------------------------------------- /src/components/QDraggableRowCollapseArrow.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 30 | 31 | 67 | -------------------------------------------------------------------------------- /src/components/QDraggableRows.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "component", 3 | "props": { 4 | "value": { 5 | "type": "Array", 6 | "desc": "An array of IDs which is the order of your rows. This should be used with v-model." 7 | } 8 | }, 9 | "slots": { 10 | "default": { 11 | "desc": "The only direct child should be a QDraggableRow with a v-for to represent your rows." 12 | } 13 | } 14 | } -------------------------------------------------------------------------------- /src/components/QDraggableRows.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 22 | 23 | 374 | -------------------------------------------------------------------------------- /src/helpers/rafHelper.js: -------------------------------------------------------------------------------- 1 | 2 | function createBatchMaker (max = 100) { 3 | let hasJob = false 4 | const jobs = [] 5 | return { 6 | queue (arr) { 7 | jobs.push(...arr) 8 | if(!hasJob) { 9 | hasJob = true 10 | requestAnimationFrame(doBatch) 11 | } 12 | } 13 | } 14 | function doBatch () { 15 | const batch = jobs.splice(0, max) 16 | batch.forEach(fn => fn()) 17 | 18 | if (jobs.length === 0) hasJob = false 19 | if (hasJob) requestAnimationFrame(doBatch) 20 | } 21 | } 22 | 23 | const rafBatch = createBatchMaker() 24 | export default rafBatch 25 | -------------------------------------------------------------------------------- /src/helpers/sortBy.js: -------------------------------------------------------------------------------- 1 | 2 | export default function sortBy (propName, desc = false) { 3 | return function (a, b) { 4 | a = a[propName] 5 | b = b[propName] 6 | if (!desc || desc === 'asc') { 7 | return (a > b) 8 | ? 1 9 | : ((b > a) 10 | ? -1 11 | : 0) 12 | } 13 | return (a < b) 14 | ? 1 15 | : ((b < a) 16 | ? -1 17 | : 0) 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Quasar App Extension index/runner script 3 | * (runs on each dev/build) 4 | * 5 | * API: https://github.com/quasarframework/quasar/blob/master/app/lib/app-extension/IndexAPI.js 6 | */ 7 | 8 | function extendWithComponent (conf) { 9 | // make sure boot file is registered 10 | conf.boot.push('~quasar-app-extension-draggable/src/boot/index.js') 11 | 12 | // make sure boot file transpiles 13 | conf.build.transpileDependencies.push(/quasar-app-extension-draggable[\\/]src/) 14 | console.log(` App Extension (draggable) Info: 'Adding draggable boot reference to your quasar.conf.js'`) 15 | } 16 | 17 | module.exports = function (api) { 18 | api.compatibleWith('@quasar/app', '^1.0.0-beta.18') 19 | 20 | // register JSON api 21 | api.registerDescribeApi('QDraggableRows', './components/QDraggableRows.json') 22 | api.registerDescribeApi('QDraggableRow', './components/QDraggableRow.json') 23 | 24 | // extend quasar.conf 25 | api.extendQuasarConf(extendWithComponent) 26 | } 27 | --------------------------------------------------------------------------------