This is a Polymer element that enables any DOM element to be draggable and resizable.
- Install the component from bower:
bower install drag-resize
- Insert the component into your page:
<link rel="import" href="drag-resize.html">
- Add the
<drag-resize></drag-resize>
anywhere in your document:
<body>
<!-- content -->
<drag-resize></drag-resize>
<!-- content -->
</body>
- Then, add the
drag-resize
attribute to the elements you want to be draggable & resizable, ex.:
<drag-resize></drag-resize>
<!-- add the attribute "drag-resize" to make this element draggable and resizable -->
<div drag-resize>this is a DIV element.</div>
<!-- this element won't be draggable nor resizable -->
<div>this is a DIV element.</div>
is a property that preserves the aspectRatio.
@property aspectRatio
@type bool
@default false
is the current selected element.
@property selectedElement
@type DOMElement
@default null
is the resize handler of the element.
@property resizeHandle
@type DOMElement
@default null
is the attributes that allows automatic blur onclick.
@property allowBlur
@type bool
@default true
is the attribute that toggles globally the resize.
@property enable
@type bool
@default true
is the highest Z-Index allocated.
@property zIndex
@type number
@default 1
is the Bounding box area, in pixels.
@property bbox
@type object
@default { elmX: 0, elmY: 0, elmH: 0, elmW: 0 }
is the mouse information.
@property mouse
@type object
@default { x: 0, y: 0, last: { x: 0, y: 0 }, offset: { x: 0, y: 0 } }
is the minimum pixel width of the element.
@property minWidth
@type number
@default 30
is the minimum pixel height of the element.
@property minHeight
@type number
@default 30
is the minimum left position, in pixels.
@property minLeft
@type number
@default -9999
is the maximum left position, in pixels.
@property maxLeft
@type number
@default 9999
is the minimum top position, in pixels.
@property minTop
@type number
@default -9999
is the minimum top position, in pixels.
@property maxTop
@type number
@default 9999
is the zoom ratio used to scale the element.
@property zoomRatio
@type number
@default 1
is the original zoom level.
@property zoomLevel
@type number
@default 1
python -m SimpleHTTPServer
Or other method using NodeJS:
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
.
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