Draggabilly 功能强大的拖动拖拽元素插件 - 文章教程

Draggabilly 功能强大的拖动拖拽元素插件

发布于 2020-07-02 字数 9433 浏览 1661 评论 0

Draggabilly 可帮你轻松实现网页上各种元素的拖放操作。1.0版本 支持 ie8+ 和多点触控,2.0版本 支持 ie10+ 和多点触控,目前最新版本 v2.3.0。

Draggabilly 功能强大的拖动拖拽元素插件

github地址

安装

获取源码打包文件

包管理工具

使用npm安装:npm install draggabilly
使用Bower安装:bower install draggabilly

CDN

通过cdn直接链接到Draggabilly文件

<!-- 1.0版本 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/draggabilly/1.2.4/draggabilly.pkgd.min.js"></script>
<!-- 或者 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/draggabilly/1.2.4/draggabilly.pkgd.js"></script>

<!-- 2.0版本 -->
<script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"></script>
<!-- 或者 -->
<script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.js"></script>

使用

初始化 draggabilly 为一个 jQuery 插件

var $draggable = $('.draggable').draggabilly({
  // 选项(配置)...
})

使用原生 js 初始化

var elem = document.querySelector('.draggable');
var draggie = new Draggabilly( elem, {
  // 选项...
});

// 或者直接将元素作为第一个参数
var draggie = new Draggabilly( '.draggable', {
  // 选项...
});

// 如果你有多个.draggable元素
// 首先获取所有的拖拽元素
var draggableElems = document.querySelectorAll('.draggable');
// 设置一个数组用来存放初始化后的所有拖拽元素
var draggies = []
// 初始化
for ( var i=0, len = draggableElems.length; i < len; i++ ) {
  var draggableElem = draggableElems[i];
  var draggie = new Draggabilly( draggableElem, {
    // 选项...
  });
  draggies.push( draggie );
}

相关的 class
.is-pointer-down 当用户鼠标第一次点击(或触摸)时添加
.is-dragging 当元素开始拖拽时添加

选项(配置)

axis

类型: 字符串(String)
值: ‘x’ 或者 ‘y’

axis: 'x'

元素允许在水平或垂直方向上拖动,默认是水平垂直均可

containment

类型:元素、选择器字符串 或 布尔值

containment: '.container'

包含元素边界的移动。如果 true,容器将是父元素。

grid

类型: 数组(Array)
值: [ x, y ]

grid: [ 20, 20 ]

网格式移动元素,每x和y像素移动元素

handle

类型: 选择器字符串

handle: '.handle'

指定拖动交互开始的元素。
句柄(操作器)是有用的,当你不想所有的内部元素被用于拖动,如输入和表单。

事件

使用jquery标准事件.on().off()、和.one().,事件里面的this指向当前拖拽的元素。

// jQuery
function listener(/* 参数 */) {
  // 获取拖拽元素实例
  var draggie = $(this).data('draggabilly');
  console.log( 'eventName happened', draggie.position.x, draggie.position.y );
}
// 绑定事件监听
$draggable.on( 'eventName', listener );
// 移除事件监听
$draggable.off( 'eventName', listener );
// 只触发一次事件监听。注意是one不是on
$draggable.one( 'eventName', function() {
  console.log('eventName happened just once');
});

使用原生js绑定事件.on().off()、和.once(),在事件里this指向当前拖拽的元素。

// 原生JS
function listener(/* 参数 */) {
  console.log( 'eventName happened', this.position.x, this.position.y );
}
// 绑定事件监听
draggie.on( 'eventName', listener );
// 移除事件监听
draggie.off( 'eventName', listener );
// 只触发一次事件监听。注意是once不是one或者on
draggie.once( 'eventName', function() {
  console.log('eventName happened just once');
});

dragStart

拖动开始移动前触发,当移动小于2像素时表现为点击。

// jQuery
$draggable.on( 'dragStart', function( event, pointer ) {...})
// 原生JS
draggie.on( 'dragStart', function( event, pointer ) {...})
  • event – 类型: 事件 – 原生的mousedowntouchstart事件
  • pointer – 类型: 鼠标事件(MouseEvent)或触控事件(Touch)对象 – 这个事件对象有.pageX.pageY

dragMove

当元素移动时触发。

// jQuery
$draggable.on( 'dragMove', function( event, pointer, moveVector ) {...})
// 原生JS
draggie.on( 'dragMove', function( event, pointer, moveVector ) {...})
  • event – 类型: 事件 – 原生的mousemove或者touchmove事件
  • pointer – 类型: 鼠标事件(MouseEvent)或触控事件(Touch)对象 – 事件对象有.pageX.pageY
  • moveVector – 类型: 对象 – 当前位置离初始位置的位移 { x: 20, y: -30 }

dragEnd

当元素停止移动时触发。

// jQuery
$draggable.on( 'dragEnd', function( event, pointer ) {...})
// 原生JS
draggie.on( 'dragEnd', function( event, pointer ) {...})
  • event – 类型: 事件 – the original mouseup or touchend event
  • pointer – 类型: 鼠标事件(MouseEvent)或触控事件(Touch)对象 – 事件对象有.pageX.pageY

pointerDown

当用户指针按下(鼠标、触摸)时触发。

// jQuery
$draggable.on( 'pointerDown', function( event, pointer ) {...})
// 原生JS
draggie.on( 'pointerDown', function( event, pointer ) {...})
  • event – 类型: 事件 – the original mouseup or touchend event
  • pointer – 类型: 鼠标事件(MouseEvent)或触控事件(Touch)对象 – 事件对象有.pageX.pageY

pointerMove

当用户的指针移动时触发。

// jQuery
$draggable.on( 'pointerMove', function( event, pointer, moveVector ) {...})
// 原生JS
draggie.on( 'pointerMove', function( event, pointer, moveVector ) {...})
  • event – 类型: 事件 – 原生的mousemove或者touchmove事件
  • pointer – 类型: 鼠标事件(MouseEvent)或触控事件(Touch)对象 – 事件对象有.pageX.pageY
  • moveVector – 类型: 对象 – 当前位置离初始位置的位移 { x: 20, y: -30 }

pointerUp

当用户指针离开元素时触发。

// jQuery
$draggable.on( 'pointerUp', function( event, pointer ) {...})
// 原生JS
draggie.on( 'pointerUp', function( event, pointer ) {...})
  • event – 类型: 事件 – the original mouseup or touchend event
  • pointer – 类型: 鼠标事件(MouseEvent)或触控事件(Touch)对象 – 事件对象有.pageX.pageY

staticClick

用户的指针压下并没有开始拖动。
单击事件很难拖动界面检测,因为他们是当用户的鼠标触发。draggabilly的staticclick事件解决了,因为它被触发时,用户没有拖。

// jQuery
$draggable.on( 'staticClick', function( event, pointer ) {...})
// 原生JS
draggie.on( 'staticClick', function( event, pointer ) {...})
  • event – 类型: 事件 – the original mouseup or touchend event
  • pointer – 类型: 鼠标事件(MouseEvent)或触控事件(Touch)对象 – 事件对象有.pageX.pageY

方法

disable

// jQuery
$draggable.draggabilly('disable')
// vanilla JS
draggie.disable()

enable

// jQuery
$draggable.draggabilly('enable')
// vanilla JS
draggie.enable()

destroy

// jQuery
$draggable.draggabilly('destroy')
// vanilla JS
draggie.destroy()

jQuery.fn.data(‘draggabilly’)

从一个jQuery对象得到draggabilly实例。draggabilly实例访问draggabilly有用的属性。

var draggie = $('.draggable').data('draggabilly')
// access Draggabilly properties
console.log( 'draggie at ' + draggie.position.x + ', ' + draggie.position.y )

Properties(属性)

position

{ x: 20, y: -30 }
  • x 整数
  • y 整数

项目主页:https://draggabilly.desandro.com/

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论