Tests

├── .gitignore ├── .bowerrc ├── LICENSE.md ├── bower.json ├── test ├── index.html └── basic-test.html ├── index.html ├── demo.html ├── drag-resize.css ├── README.md └── drag-resize.html /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | -------------------------------------------------------------------------------- /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "./bower_components" 3 | } 4 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 Wassim Chegham. All rights reserved. 2 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 3 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 4 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 5 | Code distributed by Google as part of the polymer project is also 6 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "drag-resize", 3 | "private": false, 4 | "version": "0.1.0", 5 | "authors": [ 6 | "Wassim Chegham " 7 | ], 8 | "description": "Enable any DOM element to be draggable and resizable.", 9 | "keywords": [ 10 | "web-component", 11 | "web-components", 12 | "polymer", 13 | "resize", 14 | "resizable", 15 | "drag", 16 | "draggable" 17 | ], 18 | "main": "drag-resize.html", 19 | "license": "MIT", 20 | "homepage": "https://github.com/manekinekko/drag-resize/", 21 | "ignore": [ 22 | "**/.*", 23 | "test", 24 | "tests", 25 | "node_modules" 26 | ], 27 | "dependencies": { 28 | "polymer": "Polymer/polymer", 29 | "core-elements": "Polymer/core-elements" 30 | }, 31 | "devDependencies": { 32 | "web-component-tester": "*" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | Tests 16 | 17 | 18 | 19 | 20 | 21 | 22 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 31 | 32 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | Drag'n'Resize Demo 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |

An example of using <drag-resize>:

26 | 27 | 36 | 37 | 38 | 39 | 40 |

41 | 42 |

43 | this is a DIV element. 44 |

45 | 46 |

47 | THIS BLOCK IS NOT RESIZABLE NOR DRAGGABLE. 48 |

49 | 50 | This is a SPAN element 51 | 52 | 55 | 56 |

57 | 58 |

59 | 60 |

61 | 74 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /drag-resize.css: -------------------------------------------------------------------------------- 1 | /* 2 | * @license 3 | * Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 4 | * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5 | * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6 | * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7 | * Code distributed by Google as part of the polymer project is also 8 | * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 9 | */ 10 | 11 | :host { 12 | position: absolute; 13 | border: 1px dashed transparent; 14 | display: none; 15 | z-index: 999; 16 | transform: translate3d(0, 0, 0); 17 | -webkit-transform: translate3d(0, 0, 0); 18 | /*transition: all 0.1s linear;*/ 19 | } 20 | 21 | :host(.drag-resize-focus) { 22 | z-index: 998; 23 | position: absolute; 24 | } 25 | 26 | :host > div { 27 | width: 100%; 28 | height: 100%; 29 | position: absolute; 30 | } 31 | 32 | :host(.drag-resize-selected) { 33 | border-color: rgb(0, 150, 253); 34 | cursor: move; 35 | display: block; 36 | } 37 | 38 | /* Apply the element you want to drag/resize */ 39 | ::content { 40 | position: relative; 41 | left: 0; 42 | top: 0; 43 | font-size: 14px; 44 | -webkit-user-select: none; 45 | user-select: none; 46 | border: 1px solid transparent; 47 | z-index: 10; 48 | } 49 | 50 | .drag-resize-handlers { 51 | position: absolute; 52 | width: 5px; 53 | height: 5px; 54 | font-size: 1px; 55 | background: rgb(0, 150, 253); 56 | -webkit-transition: all 0.1s linear; 57 | transition: all 0.1s linear; 58 | opacity: 0; 59 | border: 1px solid rgb(255, 255, 255); 60 | } 61 | 62 | :host(.drag-resize-selected) .drag-resize-handlers { 63 | opacity: 1; 64 | } 65 | 66 | :host .debug-info { 67 | font-size: 10px; 68 | border: 1px solid; 69 | border-radius: 4px; 70 | text-align: center; 71 | color: rgb(255, 255, 255); 72 | background: rgb(0,0,0); 73 | line-height: 15px; 74 | width: 180px; 75 | position: absolute; 76 | bottom: -40px; 77 | left: 50%; 78 | margin-left: -100px; 79 | padding: 4px; 80 | } 81 | 82 | 83 | .drag-resize-handlers:hover { 84 | transform: scale(3); /*chrome*/ 85 | -webkit-transform: scale(3); /*nodewebkit*/ 86 | } 87 | 88 | /* 89 | Individual corner classes - required for resize support. 90 | */ 91 | .drag-resize-handlers[data-direction="tl"] { 92 | top: -5px; 93 | left: -5px; 94 | cursor: nw-resize; 95 | } 96 | .drag-resize-handlers[data-direction="tm"] { 97 | top: -5px; 98 | left: 50%; 99 | margin-left: -5px; 100 | cursor: n-resize; 101 | } 102 | .drag-resize-handlers[data-direction="tr"] { 103 | top: -5px; 104 | right: -5px; 105 | cursor: ne-resize; 106 | } 107 | 108 | .drag-resize-handlers[data-direction="ml"] { 109 | top: 50%; 110 | margin-top: -5px; 111 | left: -5px; 112 | cursor: w-resize; 113 | } 114 | .drag-resize-handlers[data-direction="mr"] { 115 | top: 50%; 116 | margin-top: -5px; 117 | right: -5px; 118 | cursor: e-resize; 119 | } 120 | 121 | .drag-resize-handlers[data-direction="bl"] { 122 | bottom: -5px; 123 | left: -5px; 124 | cursor: sw-resize; 125 | } 126 | .drag-resize-handlers[data-direction="bm"] { 127 | bottom: -5px; 128 | left: 50%; 129 | margin-left: -5px; 130 | cursor: s-resize; 131 | } 132 | .drag-resize-handlers[data-direction="br"] { 133 | bottom: -5px; 134 | right: -5px; 135 | cursor: se-resize; 136 | } 137 | 138 | .hidden { 139 | display: none; 140 | } 141 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | drag-resize 2 | ============ 3 | 4 | This is a Polymer element that enables any DOM element to be draggable and resizable. 5 | 6 | ## Usage 7 | 8 | 1) Install the component from bower: 9 | 10 | ```shell 11 | bower install drag-resize 12 | ``` 13 | 14 | 2) Insert the component into your page: 15 | 16 | ```html 17 | 18 | ``` 19 | 20 | 3) Add the `````` anywhere in your document: 21 | 22 | ```html 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | ``` 33 | 34 | 4) Then, add the ```drag-resize``` attribute to the elements you want to be draggable & resizable, ex.: 35 | 36 | ```html 37 | 38 | 39 | 40 |

this is a DIV element.

41 | 42 | 43 |

this is a DIV element.

44 | ``` 45 | 46 | ## Attributes 47 | 48 | ### aspectRatio 49 | is a property that preserves the aspectRatio. 50 | 51 | ``` 52 | @property aspectRatio 53 | @type bool 54 | @default false 55 | ``` 56 | 57 | ### selectedElement 58 | is the current selected element. 59 | 60 | ``` 61 | @property selectedElement 62 | @type DOMElement 63 | @default null 64 | ``` 65 | 66 | ### resizeHandle 67 | is the resize handler of the element. 68 | 69 | ``` 70 | @property resizeHandle 71 | @type DOMElement 72 | @default null 73 | ``` 74 | 75 | ### allowBlur 76 | is the attributes that allows automatic blur onclick. 77 | 78 | ``` 79 | @property allowBlur 80 | @type bool 81 | @default true 82 | ``` 83 | 84 | ### enable 85 | is the attribute that toggles globally the resize. 86 | 87 | ``` 88 | @property enable 89 | @type bool 90 | @default true 91 | ``` 92 | 93 | ### zIndex 94 | is the highest Z-Index allocated. 95 | 96 | ``` 97 | @property zIndex 98 | @type number 99 | @default 1 100 | ``` 101 | 102 | ### bbox 103 | is the Bounding box area, in pixels. 104 | 105 | ``` 106 | @property bbox 107 | @type object 108 | @default { elmX: 0, elmY: 0, elmH: 0, elmW: 0 } 109 | ``` 110 | 111 | ### mouse 112 | is the mouse information. 113 | 114 | ``` 115 | @property mouse 116 | @type object 117 | @default { x: 0, y: 0, last: { x: 0, y: 0 }, offset: { x: 0, y: 0 } } 118 | ``` 119 | 120 | ### minWidth 121 | is the minimum pixel width of the element. 122 | 123 | ``` 124 | @property minWidth 125 | @type number 126 | @default 30 127 | ``` 128 | 129 | ### minHeight 130 | is the minimum pixel height of the element. 131 | 132 | ``` 133 | @property minHeight 134 | @type number 135 | @default 30 136 | ``` 137 | 138 | ### minLeft 139 | is the minimum left position, in pixels. 140 | 141 | ``` 142 | @property minLeft 143 | @type number 144 | @default -9999 145 | ``` 146 | 147 | ### maxLeft 148 | is the maximum left position, in pixels. 149 | 150 | ``` 151 | @property maxLeft 152 | @type number 153 | @default 9999 154 | ``` 155 | 156 | ### minTop 157 | is the minimum top position, in pixels. 158 | 159 | ``` 160 | @property minTop 161 | @type number 162 | @default -9999 163 | ``` 164 | 165 | ### maxTop 166 | is the minimum top position, in pixels. 167 | 168 | ``` 169 | @property maxTop 170 | @type number 171 | @default 9999 172 | ``` 173 | 174 | ### zoomRatio 175 | is the zoom ratio used to scale the element. 176 | 177 | ``` 178 | @property zoomRatio 179 | @type number 180 | @default 1 181 | ``` 182 | 183 | ### zoomLevel 184 | is the original zoom level. 185 | 186 | ``` 187 | @property zoomLevel 188 | @type number 189 | @default 1 190 | ``` 191 | 192 | ## Testing Your Element 193 | 194 | 195 | ```sh 196 | python -m SimpleHTTPServer 197 | ``` 198 | 199 | Or other method using NodeJS: 200 | 201 | ```sh 202 | http-server ./ 203 | ``` 204 | 205 | This starts a web server on port 8000, so you can test your new element by navigating a browser to `localhost:8000/test/index.html`. 206 | 207 | 208 | ## License 209 | 210 | Copyright (c) 2014 Wassim Chegham. All rights reserved. 211 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 212 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 213 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 214 | Code distributed by Google as part of the polymer project is also 215 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 216 | -------------------------------------------------------------------------------- /test/basic-test.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | drag-resize 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |

27 |

this is a DIV element.

28 |

this is a DIV element.

29 |

30 | 31 | 217 | 218 | 219 | 220 | -------------------------------------------------------------------------------- /drag-resize.html: -------------------------------------------------------------------------------- 1 | 9 | 21 | 22 | 23 | 24 | 31 | 56 | 779 | --------------------------------------------------------------------------------