A touch friendly resizable container with resize events.

[ This description is mirrored from README.md at github.com/jifalops/drag-resize on 2019-05-10 ]

Published on webcomponents.org

drag-resize

A touch friendly draggable and/or resizable container.

Installation

bower i -S jifalops/drag-resize      # Polymer 2.0 class based
bower i -S jifalops/drag-resize#^0.2 # Polymer 2.0 hybrid (1.x compatible)

Usage

  • Set which directions are draggable and which edges are resizable. All possibilities are enabled by default.
  • Optional: set edge/corner borders, mouse cursors, corner gradient color.
  • Optional: listen for on-resize or on-drag events.

Demo

<drag-resize drag="left right" resize="bottom right">
  <div style="height:100px; width:100px; background-color:lightblue;"></div>
</drag-resize>

Full demo: webcomponents.org | github.

API: webcomponents.org

Contributing

  1. Fork it on Github.
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request

License

MIT

Install

Link to this version
ImportedReleased 22 August 2017MIT License
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
bower install --save jifalops/drag-resize"#1.0.1"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.0.1

Dependencies

  • polymer##^2.0.0
  • iron-flex-layout##^2.0.0
  • shadycss##^1.0.0