Dragdealer拖动组件

官网：

http://skidding.github.io/dragdealer/

https://github.com/skidding/dragdealer

目前最新版本为098.

引入js和css

<script type="text/javascript" src="//cdn.bootcss.com/jquery/2.0.3/jquery.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<![endif]-->
<link href="css/dragdealer.css" type="text/css" rel="stylesheet">
<script src="js/dragdealer.js"></script>

此处我引入了jquery，这是为了更方便的操作dom元素。Dragdealer 组件本身并不依赖jquery或其他任何类库。

Helloworld

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

<script type="text/javascript">
new Dragdealer('demo-simple-slider');
</script>

JS API

下面列举Dragdealer支持的选项、回调和方法，更多信息请阅读源码。

构造函数

Dragdealer(wrapper, options={})

接受一个id或包裹块元素的dom引用，和一个options配置选项作为参数。

Options 配置选项

bool disabled=false

初始化为禁用状态。该操作会给被操作的手柄增加一个

.disabled

类属性。

bool horizontal=true

是否水平拖动。

bool vertical=false

是否垂直拖动。

number x=0

初始化水平位置(left)，接受一个[0,1]之间的浮点数。

number y=0

初始化水平位置(top)，接受一个[0,1]之间的浮点数。

number steps=0

在包裹元素范围内，限制手柄的位置。它将包裹元素范围定义为一定量的等距虚拟网格。这约束了手柄可以放在这些步数以内的任意位置。如，将滑动器的steps设置为3，将会只允许你将滑动器移动到左侧、中间和右侧3个位置。

bool snap=false

如果设置了steps的数量，是否在拖动过程中，是否让手柄立即卡到最近的位置。打个比方，snap=false时像是无级变速，true时是固定档位。

bool slide=true

手柄在释放后是否继续滑动，这依赖于释放前的滑动速度。

bool loose=false

是否在拖动过程中放松包装器的边界。这允许手柄稍微移出包装器边界一点，但一释放就滑动回到边界的对齐位置。

number top=0

手柄和包装器边界之间的上边距。

number bottom=0

手柄和包装器边界之间的下边距。

number left=0

手柄和包装器边界之间的左边距。

number right=0

手柄和包装器边界之间的右边距。

string handleClass=handle

定制手柄元素的属性类。

bool css3=true

是否在较新的浏览器中使用css3 transform 来代替绝对定位。

fn customRequestAnimationFrame

（在测试时）提供定制的 cancelAnimationFrame 函数。

fn customCancelAnimationFrame

（在测试时）提供定制的 cancelAnimationFrame 函数。

回调事件

注意：从作用出发，将回调事件单独拿出来，你需要明白他们也是options初始化配置的一部分。

fn callback(x, y)

当拖放动作释放时触发，携带表示手柄位置的参数x/y。由于步数约束和拖动动作的影响，参数的值是手柄完成滑动动画后的滑块的值。

fn dragStopCallback(x, y)

和callback(x,y) 一样，但只在真正拖动时才触发，程序修改手柄位置不触发此事件。

fn dragStartCallback(x, y)

和dragStopCallback(x,y) 一样，但只在拖动开始时触发，参数值为拖动前的位置。

fn animationCallback(x, y)

只要有动画就触发，这是连续触发的事件，可以实时监听滑块位置。参数值表示手柄Dom元素的实际位置，当loose设置true时，它也包括超越边界的位置(可能为负数)。

Methods 方法

disable

禁用拖动组件，相当于设置disabled选项，拖动组件被设置

.disabled

类。

enable

启用拖动组件，手柄的

.disabled

类将被移除。

reflow

重新计算包装器边界。适用于当包装器是响应式的，而且它的父容器改变了尺寸时，或者包装器本身的尺寸改变了。

getValue

编程方式获取拖动组件的值，返回值为 [x, y] 元组，它的值等于正常回调的映射值，不包括animationCallback回调。

getStep

和getValue类似，但它返回的是步数。如果没有设置steps，该方法返回[NaN,NaN]

setValue(x, y, snap=false)

设置拖动组件的值，第三个参数为是否直接切换位置，而不采用滑动过渡。

setStep(x, y, snap=false)

与setValue(x, y, snap=false) 类似，但位置单位为步数。

Demo 实例

显示进度的slider滑动器

用户可以使用slider滑动器，通过拖动滑块改变数值，如一个input容器的值。基于这个目的，

animationCallback

将是最好的帮手，使用它你可以让用户输入数据使用更形象的方式。

new Dragdealer('just-a-slider', {
animationCallback: function(x, y) {
$('#just-a-slider .value').text(Math.round(x * 100));
}
});

页面内容滚动

控制不同的元素是Dragdealer最直接的用法。这需要一点简单的数学知识，就可以让它垂直运动。

<div class="content-scroller">
<div id="content-scroller" class="dragdealer">
<div class="handle red-bar">
<span class="value"><i class="fa fa-bars"></i></span>
</div>
</div>
<div class="content-mask">
<div class="content-body">
<p>It was all a dream<br>
I used to read Word Up magazine<br>
Salt 'n' Pepa and Heavy D up in the limousine<br>
Hangin pictures on my wall<br>
Every Saturday Rap Attack, Mr. Magic, Marley Marl<br>
I let my tape rock 'til my tape popped<br>
Smoking weed and Bambu, sipping on Private Stock<br>
Way back, when I had the red and black lumberjack<br>
With the hat to match<br>
Remember Rappin Duke? duh-ha, duh-ha<br>
You never thought that hip hop would take it this far<br>
Now I'm in the limelight cause I rhyme tight<br>
Time to get paid, blow up like the World Trade<br>
Born sinner, the opposite of a winner<br>
Remember when I used to eat sardines for dinner<br>
Peace to Ron G, Brucey B, Kid Capri<br>
Funkmaster Flex, Lovebug Starski (wassup)<br>
I'm blowing up like you thought I would<br>
Call the crib, same number same hood (that's right)<br>
It's all good (it's all good)<br>
And if you don't know, now you know, nigga</p>

<p>I made the change from a common thief<br>
To up close and personal with Robin Leach<br>
And I'm far from cheap, I smoke skunk with my peeps all day<br>
Spread love, it's the Brooklyn way<br>
The Moet and Alizé keep me pissy<br>
Girls used to diss me<br>
Now they write letters cause they miss me<br>
I never thought it could happen, this rapping stuff<br>
I was too used to packing gats and stuff<br>
Now honeys play me close like butter play toast<br>
From the Mississippi down to the east coast<br>
Condos in Queens, indo for weeks<br>
Sold out seats to hear Biggie Smalls speak<br>
Living life without fear<br>
Putting 5 karats in my baby girl's ears<br>
Lunches, brunches, interviews by the pool<br>
Considered a fool cause I dropped out of high school<br>
Stereotypes of a black male misunderstood<br>
And it's still all good<br>
Uh...and if you don't know, now you know, nigga</p>

<p>Super Nintendo, Sega Genesis<br>
When I was dead broke, man I couldn't picture this<br>
50-inch screen, money green leather sofa<br>
Got two rides, a limousine with a chauffeur<br>
Phone bill about two G's flat<br>
No need to worry, my accountant handles that<br>
And my whole crew is lounging<br>
Celebrating every day, no more public housing<br>
Thinking back on my one-room shack<br>
Now my mom pimps a Ac with minks on her back<br>
And she loves to show me off, of course<br>
Smiles every time my face is up in The Source<br>
We used to fuss when the landlord dissed us<br>
No heat, wonder why Christmas missed us<br>
Birthdays was the worst days<br>
Now we sip champagne when we thirst-ay<br>
Uh, damn right I like the life I live<br>
Cause I went from negative to positive<br>
And it's all</p>

<p>...and if you don't know, now you know, niggaaa</p>
</div>
</div>
</div>

var availHeight = $('.content-body').outerHeight() -
$('.content-mask').outerHeight();
new Dragdealer('content-scroller', {
horizontal: false,
vertical: true,
yPrecision: availHeight,
animationCallback: function(x, y) {
$('.content-body').css('margin-top', -y * availHeight);
}
});

yPrecision选项用于调整callback参数值的垂直间隔，当控制一个大于Dragdealer包装器的元素时是很有用的。

/* Content slider */

.content-scroller .dragdealer {
float: right;
width: 40px;
height: 300px;
}
.content-scroller .dragdealer .handle {
width: 40px;
height: 60px;
text-align: center;
}
.content-scroller .dragdealer .handle i {
line-height: 60px;
}
.content-scroller .content-mask {
height: 298px;
margin: 0 55px 0 0;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
}
.content-scroller .content-body {
/* Incorporate the margins of the paragraphs inside */
overflow: hidden;
background: #fff;
}
.content-scroller .content-body p {
margin: 15px;
color: #333;
font-family: monospace;
line-height: 24px;
}

“slide to unlock” 滑动解锁

iPhone滑动解锁的效果。经典效果：

<div class="slide-to-unlock old-slider">
<div id="slide-to-unlock-old" class="dragdealer">
<div class="slide-text">slide to unlock</div>
<div class="handle"></div>
</div>
</div>

new Dragdealer('slide-to-unlock-old', {
steps: 2,
callback: function(x, y) {
// Only 0 and 1 are the possible values because of "steps: 2"
if (x) {
this.disable();
$('#slide-to-unlock-old').fadeOut();
}
}
});

现在ios已经变化了，新的效果：

<div class="slide-to-unlock new-slider">
<div id="slide-to-unlock-new" class="dragdealer">
<div class="handle">
<div class="slide-text"><i class="fa fa-angle-right"></i> slide to unlock</div>
</div>
</div>
</div>

new Dragdealer('slide-to-unlock-new', {
x: 1,
steps: 2,
loose: true,
callback: function(x, y) {
// Only 0 and 1 are the possible values because of "steps: 2"
if (!x) {
this.disable();
$('#slide-to-unlock-new').fadeOut();
}
}
});

本例的这些demo单纯去准确的复制出解锁的效果也没什么实际意义，但却可以提现出Dragdealer的灵活性。

后一个示例中手柄大于包裹器，所以设置了

overflow: hidden;

去遮罩超出的部分。建议参照html和css去更好的理解。

/* Slide to unlock */

.slide-to-unlock {
position: relative;
width: 400px;
height: 80px;
}
.slide-to-unlock .dragdealer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 0;
background: none;
height: auto;
}
.slide-to-unlock .handle {
height: 100%;
border-radius: 0;
}
.slide-to-unlock .disabled {
background: none;
}
.slide-to-unlock .slide-text {
position: absolute;
top: 0;
height: 80px;
font-size: 30px;
line-height: 80px;
text-align: center;
}

/* Old slide to unlock */

.old-slider {
border-radius: 16px;
background: #222;
background-image: -webkit-linear-gradient(top, #111 0%, #333 100%);
background-image: -moz-linear-gradient(top, #111 0%, #333 100%);
background-image: -o-linear-gradient(top, #111 0%, #333 100%);
background-image: linear-gradient(to bottom, #111 0%, #333 100%);
}
.old-slider .dragdealer {
top: 5px;
bottom: 5px;
left: 5px;
right: 5px;
}
.old-slider .slide-text {
right: 0;
width: 290px;
height: 70px;
color: #999;
line-height: 70px;
cursor: default;
}
.old-slider .handle {
width: 100px;
border-radius: 12px;
background: #ccc;
background-image: -webkit-linear-gradient(top, #f1f1f1 0%, #aaa 100%);
background-image: -moz-linear-gradient(top, #f1f1f1 0%, #aaa 100%);
background-image: -o-linear-gradient(top, #f1f1f1 0%, #aaa 100%);
background-image: linear-gradient(to bottom, #f1f1f1 0%, #aaa 100%);
}

/* Slide to unlock new */

.new-slider {
background: #333344;
}
.new-slider .dragdealer {
overflow: hidden;
}
.new-slider .handle {
width: 200%;
}
.new-slider .slide-text {
left: 50%;
width: 50%;
color: #9999aa;
}

Image carousel 图片轮播

[原文]让我们来点高级应用(译者：脑子已经跟不上了，以下晕菜…)。拖动手柄是一串图片，组件包装器的大小是一张图片的大小。

<div id="image-carousel" class="dragdealer">
<div class="handle">
<div class="slide img1">
<div class="info">
<p class="title">Aston Martin DB4</p>
<p class="description"><strong>1959</strong> — 3.7L, 240hp</p>
</div>
</div>
<div class="slide img2">
<div class="info">
<p class="title">Mercedes-Benz 300SL</p>
<p class="description"><strong>1956</strong> — 2996cc, 212-222hp</p>
</div>
</div>
<div class="slide img3">
<div class="info">
<p class="title">Jaguar E-Type</p>
<p class="description"><strong>1966</strong> — 3.8L, 265bhp</p>
</div>
</div>
<div class="slide img4">
<div class="info">
<p class="title">Maserati A6</p>
<p class="description"><strong>1950</strong> — 2L, 120bhp</p>
</div>
</div>
</div>
</div>

new Dragdealer('image-carousel', {
steps: 4,
speed: 0.3,
loose: true,
requestAnimationFrame: true
});

speed选项可以控制滑动动画的速度，取值为[0,1]之间的浮点数，缺省为0.1.

/* Image carousel */

#image-carousel {
height: 400px;
border-radius: 0;
overflow: hidden;
}
#image-carousel .handle {
width: 400%;
height: 100%;
border-radius: 0;
}
#image-carousel .handle .slide {
float: left;
position: relative;
width: 25%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
}
#image-carousel .handle .img1 {
background-image: url('../image/carousel/aston-martin-db4.jpg');
}
#image-carousel .handle .img2 {
background-image: url('../image/carousel/mercedes-benz-300sl.jpg');
}
#image-carousel .handle .img3 {
background-image: url('../image/carousel/jaguar-e-type.jpg');
}
#image-carousel .handle .img4 {
background-image: url('../image/carousel/maserati-a6.jpg');
}
#image-carousel .handle .slide .info {
position: absolute;
top: 15px;
right: 15px;
padding: 10px 15px;
background: #fff;
background: rgba(255, 255, 255, 0.5);
}
#image-carousel .handle .slide .info p {
margin: 0;
}
#image-carousel .handle .slide .info .title {
font-size: 24px;
font-weight: bold;
line-height: 30px;
}
#image-carousel .handle .slide .info .description {
color: #333;
font-size: 16px;
line-height: 20px;
}

交互式画布蒙板

说白了就好像从一个窗户看外面的风景，可以拖动。

<div id="canvas-mask" class="dragdealer">
<div class="handle">
<div class="page">
<p class="menu">
<a href="#" data-x="0" data-y="1">Two-dimensional</a> |
<a href="#" data-x="1" data-y="1">Elastic</a> |
<a href="#" data-x="1" data-y="0">Interactive</a> |
<strong>Open</strong>
</p>
<p class="body">
Dragdealer is <strong>open source</strong>, <br >
see you on <a href="https://github.com/skidding/dragdealer">GitHub</a>
</p>
</div>
<div class="page">
<p class="menu">
<a href="#" data-x="0" data-y="1">Two-dimensional</a> |
<a href="#" data-x="1" data-y="1">Elastic</a> |
<strong>Interactive</strong> |
<a href="#" data-x="0" data-y="0">Open</a>
</p>
<p class="body">
The dragged surface can host <strong>rich content</strong>, <br>
including links for scrolling inside itself
</p>
</div>
<div class="page">
<p class="menu">
<strong>Two-dimensional</strong> |
<a href="#" data-x="1" data-y="1">Elastic</a> |
<a href="#" data-x="1" data-y="0">Interactive</a> |
<a href="#" data-x="0" data-y="0">Open</a>
</p>
<p class="body">
The masked content can be discovered through <br>
both <strong>horizontal and vertical dragging</strong>
</p>
</div>
<div class="page">
<p class="menu">
<a href="#" data-x="0" data-y="1">Two-dimensional</a> |
<strong>Elastic</strong> |
<a href="#" data-x="1" data-y="0">Interactive</a> |
<a href="#" data-x="0" data-y="0">Open</a>
</p>
<p class="body">
The surface boundaries have an <strong>elastic ease</strong> and <br>
the corners can be slightly pulled inwards
</p>
</div>
</div>
</div>

var canvasMask = new Dragdealer('canvas-mask', {
x: 0,
// Start in the bottom-left corner
y: 1,
vertical: true,
speed: 0.2,
loose: true,
requestAnimationFrame: true
});

// Bind event on the wrapper element to prevent it when a drag has been made
// between mousedown and mouseup (by stopping propagation from handle)
$('#canvas-mask').on('click', '.menu a', function(e) {
e.preventDefault();
var anchor = $(e.currentTarget);
canvasMask.setValue(anchor.data('x'), anchor.data('y'));
});

/* Canvas mask */

#canvas-mask {
height: 500px;
border-radius: 0;
overflow: hidden;
}
#canvas-mask .handle {
width: 200%;
height: 200%;
border-radius: 0;
background: url('../image/canvas-mask.jpg') no-repeat center center;
}
#canvas-mask .handle .page {
float: left;
position: relative;
width: 50%;
height: 50%;
}
#canvas-mask .handle .page .menu {
position: absolute;
top: 15px;
left: 15px;
margin: 0;
padding: 10px 15px;
background: #000;
background: rgba(0, 0, 0, 0.75);
color: #666;
cursor: default;
}
#canvas-mask .handle .page .body {
position: absolute;
bottom: 15px;
left: 15px;
margin: 0;
padding: 10px 15px;
background: #fff;
background: rgba(255, 255, 255, 0.5);
color: #000;
color: rgba(0, 0, 0, 0.75);
font-size: 30px;
line-height: 40px;
}

Final

Dragdealer 只是一个拖动组件，其它的交给你了。