GSAP Draggable.js 拖拉动作的方向感应

一款能感知鼠标拖拉方向的JS库。

GSAP

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2461
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/*
This demo illustrates the new direction sensing capabilities in Draggable 0.12.0

Watch a video explaining all the details: http://greensock.com/gsap-1-16

The getDirection() method can determine
 - direction from where the drag started
 - momementary direction 
 - direction relative to any elment

*/
var directionStart = document.getElementById("directionStart"),
    directionVelocity = document.getElementById("directionVelocity"),
    directionObject = document.getElementById("directionObject"),
    original = document.getElementById("original"),
    logoElement = document.getElementById("logoElement");

Draggable.create("#box1", {
    bounds: "#container",
    edgeResistance: 0.65,
    throwProps: true,
    autoScroll: 1,
    onDrag: updateDirections,
    onThrowUpdate: updateDirections,
    onThrowComplete: function() {
        //move the original marker to end position
        TweenLite.to(original, 1, {
            x: this.x,
            y: this.y
        });
    }
});

function updateDirections() {
    //getDirection() can return 3 types of direction...
    directionStart.innerHTML = '"' + this.getDirection("start") + '"'; //direction from start of drag
    directionVelocity.innerHTML = '"' + this.getDirection("velocity") + '"'; //momentary velocity *requires ThrowPropsPlugin
    directionObject.innerHTML = '"' + this.getDirection(logoElement) + '"'; //direction from an object
}

TweenLite.set(logoElement, {
    xPercent: -50,
    yPercent: -50
})

/*
See http://www.greensock.com/draggable/ for details about Draggable. 
This demo uses ThrowPropsPlugin which is a membership benefit of Club GreenSock, http://www.greensock.com/club/
ThrowPropsPlugin is necessary for getDirection("velocity").
*/

编译

CSS

body {
    background: #1d1d1d;
    font-family: Signika Negative, Asap, sans-serif;
    color: #999;
    padding: 14px;
}
h1 {
    font-weight: 400;
    margin: 0 0 5px 0;
    color: white;
}
.dataDisplay {
    font-size: 20px;
    font-weight: 300;
    font-family: monospace;
    color: #ccc;
    margin: 10px 0;
}
p span {
    color: white;
    font-weight: 400;
}
#container {
    background: black;
    height: 440px;
    width: 100%;
    overflow: visible;
    padding: 0;
    position: relative;
    border: 1px solid #555;
}
.box {
    background-color: #91e600;
    text-align: center;
    width: 196px;
    height: 100px;
    line-height: 100px;
    color: black;
    position: absolute;
    top: 0;
    font-size: 18px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
a,
a:hover,
a:visited {
    color: #71b200;
}
#logoElement {
    position: absolute;
    left: 50%;
    top: 50%;
    border: solid 1px #555;
}
.dataDisplay strong {
    color: #d0782a;
    font-weight: 400;
}
#directionStart,
#directionVelocity,
#directionObject {
    color: #91e600;
    font-weight: 400;
}

HTML

一款能感知鼠标拖拉方向的JS库。

GSAP

编辑器支持Emmet

快捷键

一款能感知鼠标拖拉方向的JS库。

GSAP

TweenMax.js+Draggable.js 灯泡明灭、钟摆运动和灵感搜索

GSAP+CSS3 DrawSVGPlugin Values使用演示

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：