https://github.com/manekinekko/drag-resize

Enable any DOM element to be resizable and draggable.
https://github.com/manekinekko/drag-resize

Last synced: 27 days ago
JSON representation

Enable any DOM element to be resizable and draggable.

• Host: GitHub
• URL: https://github.com/manekinekko/drag-resize
• Owner: manekinekko
• License: other
• Created: 2014-12-25T20:49:46.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2015-03-02T18:17:19.000Z (over 9 years ago)
• Last Synced: 2024-10-05T11:35:00.610Z (about 1 month ago)
• Language: HTML
• Homepage: http://manekinekko.github.io/drag-resize/
• Size: 2.6 MB
• Stars: 24
• Watchers: 5
• Forks: 7
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
drag-resize

============

This is a Polymer element that enables any DOM element to be draggable and resizable.

## Usage

1) Install the component from bower:

```shell

bower install drag-resize

```

2) Insert the component into your page:

```html

```

3) Add the `````` anywhere in your document:

```html

	

	

	

	

	

```

4) Then, add the ```drag-resize``` attribute to the elements you want to be draggable & resizable, ex.:

```html

this is a DIV element.


this is a DIV element.

```


## Attributes

### aspectRatio 

is a property that preserves the aspectRatio.

```

@property aspectRatio

@type bool

@default false

```

### selectedElement 

is the current selected element.

```

@property selectedElement

@type DOMElement

@default null

```

### resizeHandle 

is the resize handler of the element.

```

@property resizeHandle

@type DOMElement

@default null

```

### allowBlur

is the attributes that allows automatic blur onclick.

```

@property allowBlur

@type bool

@default true

```

### enable 

is the attribute that toggles globally the resize.

```

@property enable

@type bool

@default true	    	

```

### zIndex 

is the highest Z-Index allocated.

```

@property zIndex

@type number

@default 1

```

### bbox 

is the Bounding box area, in pixels.

```

@property bbox

@type object

@default { elmX: 0, elmY: 0, elmH: 0, elmW: 0 }

```

### mouse 

is the mouse information.

```

@property mouse

@type object

@default { x: 0, y: 0, last: { x: 0, y: 0 }, offset: { x: 0, y: 0 } }

```

### minWidth 

is the minimum pixel width of the element.

```

@property minWidth

@type number

@default 30

```

### minHeight 

is the minimum pixel height of the element.

```

@property minHeight

@type number

@default 30

```

### minLeft 

is the minimum left position, in pixels.

```

@property minLeft

@type number

@default -9999

```

### maxLeft 

is the maximum left position, in pixels.

```

@property maxLeft

@type number

@default 9999

```

### minTop 

is the minimum top position, in pixels.

```

@property minTop

@type number

@default -9999    

```

### maxTop 

is the minimum top position, in pixels.

```

@property maxTop

@type number

@default 9999

```

### zoomRatio 

is the zoom ratio used to scale the element.

```

@property zoomRatio

@type number

@default 1

```

### zoomLevel 

is the original zoom level.

```

@property zoomLevel

@type number

@default 1

```

## Testing Your Element

```sh

python -m SimpleHTTPServer

```

Or other method using NodeJS:

```sh

http-server ./

```

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`.

## License

Copyright (c) 2014 Wassim Chegham. All rights reserved.

This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt

The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt

The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt

Code distributed by Google as part of the polymer project is also

subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt