Dragdealer.js - Drag-based JavaScript component

Dragdealer.js  is a drag-based JavaScript component, embracing endless UI solutions that can be used as a slider content scroller, image carousel and much more.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: skidding.github.io

1. INCLUDE JS FILES

<script src="lib/jquery-1.10.2.js"></script>
<link href="src/dragdealer.css" type="text/css" rel="stylesheet">
<script src="src/dragdealer.js"></script>

2. HTML

<div id="demo-simple-slider" class="dragdealer">
  <div class="handle red-bar">drag me</div>
</div>

3. JAVASCRIPT

new Dragdealer('demo-simple-slider');

4. OPTIONS

Constructor: Dragdealer(wrapper, options={}) Accepts an id or a DOM reference for the wrapper element. See possible options below.

• bool disabled=false Init Dragdealer in a disabled state. The handle will have a .disabled class.
• bool horizontal=true Enable horizontal dragging.
• bool vertical=false Enable vertical dragging.
• number x=0 Initial horizontal (left) position. Accepts a float number value between 0 and 1.
• number y=0 Initial vertical (top) position. Accepts a float number value between 0 and 1.
• number steps=0 Limit the positioning of the handle within the bounds of the wrapper, by defining a virtual grid made out of a number of equally-spaced steps. This restricts placing the handle anywhere in-between these steps. E.g. setting 3 steps to a regular slider will only allow you to move it to the left, to the right or exactly in the middle.
• bool snap=false When a number of steps is set, snap the position of the handle to its closest step instantly, even when dragging.
• bool slide=true Slide handle after releasing it, depending on the movement speed before the mouse/touch release.
• bool loose=false Loosen-up wrapper boundaries when dragging. This allows the handle to be *slightly* dragged outside the bounds of the wrapper, but slides it back to the margins of the wrapper upon release.
• number top=0 Top padding between the wrapper and the handle.
• number bottom=0 Bottom padding between the wrapper and the handle.
• number left=0 Left padding between the wrapper and the handle.
• number right=0 Right padding between the wrapper and the handle.
• fn callback(x, y) Called when releasing handle, with the projected x, y position of the handle. Projected value means the value the slider will have after finishing a sliding animation, caused by either a step restriction or drag motion (see steps and slide options.)
• fn animationCallback(x, y) Called every animation loop, as long as the handle is being dragged or in the process of a sliding animation. The x, y positional values received by this callback reflect the exact position of the handle DOM element, which includes exceeding values (even negative values) when the loose option is set true.
• string handleClass=handle Custom class of handle element.
• bool css3=true Use css3 transform in modern browsers instead of absolute positioning.
• bool requestAnimationFrame=false Animate with requestAnimationFrame or setTimeout polyfill instead of default setInterval animation.

5. METHODS

• disable Disable dragging of a Dragdealer instance. Just as with the disabled option, the handle will receive a .disabled class
• enable Enable dragging of a Dragdealer instance. The .disabled class of the handle will be removed.
• reflow Recalculate the wrapper bounds of a Dragdealer instance, used when the wrapper is responsive and its parent container changed its size, or after changing the size of the wrapper directly.
• getValue Get the value of a Dragdealer instance programatically. The value is returned as an [x, y] tuple and is the equivalent of the projected value returned by the regular callback, not animationCallback.
• getStep Same as getValue, but the value returned is in step increments (see steps option)
• setValue(x, y, snap=false) Set the value of a Dragdealer instance programatically. The 3rd parameter allows to snap the handle directly to the desired value, without any sliding transition.
• setStep(x, y, snap=false) Same as setValue, but the value is received in step increments (seesteps option)