To make an DOMElement
draggable, you can call the DraggableObject
constructor.
new DraggableObject( document.getElementById( 'my-draggable-object' ), false );
A draggable
class will automatically be set on the specified element.
You will be able to drag around your object. You need to take care about how you position your object in the dom. You can set boundaries the dragging object by setting a container
class to one of its parents.
<div class="container">
<div id="my-draggable-object">
</div>
It doesn't need to be its direct parent but keep in mind that the draggable object is positionned in an absolute manner, so don't put relative
positionned object nested between your draggable and your
container`.
You can create nested draggable objects, remember that the boundaries will be set by the closest container
parent.
<div id="my-top-container" class="container">
<div id="my-draggable-object">
<div id="my-child-container" class="container">
<div id="my-child-draggable-object"></div>
</div>
</div>
</div>
The DraggableObject
contructor takes an extra boolean
parameter. Setting this parameter to true
will add a slider to the object when selected. This slider enables the user to adjust the border-radius
of the object.
new DraggableObject( document.getElementById( 'my-draggable-object' ), true );
You can change the appearance of your draggable object by tweaking some variables defined in the styles/draggable.less
.
Just import the stylesheet and override some variables. Please not that the draggable.less
requires slider.less
to be in the same directory.
@import (less) 'draggable.less';
@draggable_min_height: 10px;
@draggable_min_width: 10px;
@draggable-selected-border-color : #14C7C7;
@draggable-selected-border-width : 3px;
The DraggableObject
instances inherit from the behaviour of SelectableObject
. The selectable objects watches user interaction with a given DOMElement
, toggling a selected
class, so you can style your element.
new SelectableObject( document.getElementById( 'my-selectable-element' ) );
If a selectable object is clicked or touched, it will receive the selected
class, and will dispatch a select
event. The selectable objects also listen to this event at the document
, this enable them to unselect themselves automatically when another selectable object is selected. Therefore only, one element can be selected
at the same time on the document.
You watch the selection by listening to the select
event
/*
* Make sure to listen for the event during the capture
* phase as the event bubbling is stopped by its source element.
*/
window.addEventListener( 'select', function (e) {
/*
* Get the selected element checking the
* source of the event.
*/
var selectedEl = e.srcElement || e.originalTarget;
}, true );
Adjust your style by adding rules to the selected
class that is applied to the selected objects.
Make sure you include the polyfills.js
content somewhere in your web app.
You can create a new instance of the slider via the constructor Slider
.
var element = document.createElement( 'div' ),
minValue = 0,
maxValue = 100,
step = 5,
slider = new Slider( element, minValue, maxValue, step );
You can listen to user interactions by listening the change
event.
slider.on( 'change', function ( value ) {
/*
* On a change event your callback function
* will provide you with the new slider value.
*/
} );
You can also set and get the value of the slider by the following methods.
// Sets the value of the slider.
slider.setValue( 70 );
// Returns the current value of the slider.
slider.getValue();
You can also set and get the percentage of the range of you slider
// Sets the percentage of the slider.
slider.setPercentage( 70 );
// Returns the current percentage of the slider.
slider.getPercentage();
You can change the appearance of the slider by tweaking some variables defined in the styles/slider.less
.
Just import the stylesheet and override some variables
@import (less) 'slider.less';
@slider_color: #333;
@slider_cursor_size: 10px;
@slider_cursor_border_size: 3px;
@slider_cursor_border_color: #FFF;
@slider_line_height: 2px;
To extend the slider, install the dev environment runnning
npm install
Then run the grunt watch
task that will compile your less
and check your js files.
grunt watch
To run the unit tests, just run
npm test