专栏首页云架构修炼手册Dragdealer拖动组件

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;
}

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 移动端H5页面踩过的CSS坑

    知乎有网友的评论是:这个问题通过css是无法解决的,即使解决了也是一种通过微调来实现的hack方法,因为文字在content-area内部渲染的时候已经偏移了,...

    Originalee
  • Selenium自动化测试-3.元素定位(3)

    css定位是通过css选择器进行定位,我们需要了解css选择器的一些知识才能进行css定位,选择器基本语法如下:

    ITester软件测试小栈
  • 1月份GitHub上最热门的JavaScript项目

    明天相信大多数程序猿们都回归工作岗位啦,不知道是否调整好心态了呢?1月份GitHub上最热门的JavaScript开源项目新鲜出炉,还是一起来看看都有哪些项目上...

    爱敲代码的猫
  • Selenium自动化测试-4.By定位及如何确定元素唯一

    (1)有时候我们不知道用哪种方法来定位元素,By定位可以根据实际场景设定定位策略。

    ITester软件测试小栈
  • Qt编写自定义控件70-扁平化flatui

    对于现在做前端开发人员来说,FlatUI肯定不陌生,最近几年扁平化的设计越来越流行,大概由于现在PC端和移动端的设备的分辨率越来越高,扁平化反而看起来更让人愉悦...

    feiyangqingyun
  • ECharts绘图解决方案——流动关系图(桑基图)

    | 导语 基于实际业务场景使用ECharts的经验,总结一些通用的解决方案。 应用场景 用流动关系图来映射品牌之间的有效换机数量,从而帮助运营对手机品牌的行...

    腾讯大讲堂
  • 利用CSS劫持流量

    最近正好有一些时间用来帮大厂挖掘漏洞,也就有了今天的话题。为什么会想到去帮互联网公司挖掘漏洞呢?一是想为互联网的美好明天贡献微薄之力,二是保证持续学习的心态,三...

    sibenx
  • 做符合百度抓取的内容网站,这样更利于百度蜘蛛抓取收录

    想要产出让用户满足的高质量内容,除了内容本身外,排版布局也是一项很重要的作业,毕竟人都是视觉动物。将文本内容划分为标题、副标题、正文等不同的类型,然后让文本各司...

    高级优化师
  • 零基础html5+div+css+js网页开发教程第003期 html代码基本结构

    在第二期中,我们对html做了入门,已经有了对网页开发基本的了解。本节知识开始书写html网页结构。

    刘金玉编程
  • 【CSS】381- 提升你的CSS选择器技巧

    我为什么要这样做呢?我们都知道选择器,但麻烦的是随着时间的推移,很容易习惯于在每个项目中使用相同的可信任选择器来实现你需要做的事情。

    pingan8787

扫码关注云+社区

领取腾讯云代金券