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 只是一个拖动组件，其它的交给你了。