PluginsKit

How to use

Drag.Fling takes some careful setup of HTML elements and CSS, but no more than you would expect for the intended usage. Consider the following HTML:

<div id="viewPort">
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
</div>

In our CSS we would (presumably) want to set the div.panel elements to have the same size as the #viewPort, and also we will most likely want #viewPort to have overflow: hidden. Also, if panels are to be lined up horizontally, we must be sure that they are (this is done most easily by a float: left). So we have, for example:

#viewPort {
    height:     400px;
    width:      300px;
    overflow:   hidden;
}

div.panel {
    height:     400px;
    width:      300px;
    float:      left;
}

Our JavaScript to invoke drag fling action is now a simple matter:

new Drag.Fling(viewPort, { flingAxis: 'x'});

Drag Fling Options

There are a few options of Drag.Fling to customize its behavior:

• maxVelocity, slideVelocity, minFlingVelocity, and slideFriction relate to the physics of sliding after the dragging ends, and all have the units pixels per frame.
• flingAxis determines the axis of movement for the panels. It defaults to 'x'. 'y' may be supplied for vertical movement.
• onFlingDone is an event handler for when a fling is completed (i.e. when the fling ends due to reaching the threshhold of the next panel).

Dependancies

core:1.2.4/Events
core:1.2.4/Options
core:1.2.4/Element.Event
core:1.2.4/Element.Style
core:1.2.4/Element.Dimensions
more:1.2.4/Drag
Mouse2Touch.js (to enable Mobile Safari support)

Screenshots

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.