开源本身写的一个拖拽库，兼容到IE8

2024年1月22日 185次阅读 来源: 上啊比卡丘

github地点：https://github.com/qiangzi772…

现在这个库的兼容做到了兼容IE8，所以假如须要兼容IE8的朋侪无妨尝尝。库内里写了许多的解释，关于想看源码的同砚是一个很好的挑选。假如以为不错能够到github上点个star，感谢列位了。
库的思绪部份参考draggabilly的完成，然则由于draggabilly也依靠了几个小的库，致使源码有点痴肥，作者也没去优化，所以我就有个这个主意，写一个新的拖拽库，兼容到IE8。

Draggable

打造跨平台的轻量级原生拖拽库

Summary

本身写的一个拖拽库，基于原生JS完成，无任何依靠，同时还做了IE8的兼容，在IE8的情况下transform回退到position完成。拖拽的动画经由历程绑定在render函数上的requestAnimationFrame完成而不是运用mousemove回调。别的库内里还写了许多的解释，轻易对源码的解读与交换。假如你以为这个库写的不错或许有值得进修的履历无妨点下右上角的star，感谢列位。

Install

直接从src文件夹中引入即可

Usage

<div id='app'></div>

能够直接传入挑选器

new Draggable('#app');

或许传入DOM节点

var elem=document.querySelector('#app');
new Draggable(elem);

假如须要为多个元素增添拖拽，请轮回遍历

var elem=document.querySelectorAll('.app');
for(var i=0,len=elem.length;i<len;i++){
    new Draggable(elem[i]);
}

API

API一览

new Draggable('#app',{
    parentMove:'#container',
    backToPosition:false,
    axis:'x',
    grid:{x:40},
    addClassName:'is-dragging',
    cursorCancel:false,
});

backToPosition

默许的拖拽动画是经由历程transform属性完成的，所以假如想运用position属性完成拖拽动画能够运用该参数

new Draggable('#app',{
    backToPosition:true
});

在IE8下会自动运用position完成拖拽

parentMove

经由历程设置parentMove能够设置挪动的父元素，如

new Draggable('#app',{
    parentMove:'#container'
});

表明当点击app元素时，app元素不会被拖拽，拖拽挪动的是全部的container元素，这个API在须要定义顶部拖拽条的时刻很有效

axis

设置该参数表明只允许某个方向可拖拽

new Draggable('#app',{
    axis:'x'
});

grid

设置拖拽的时刻挪动的单元

new Draggable('#app',{
    grid:{x:40,y:40}
});

addClassName

为拖拽的历程增添className，轻易增添拖拽款式

new Draggable('#app',{
    addClassName:'is-dragging'
});

cursor

在初始化的时刻默许为可拖拽的元素增添cursor:move属性，假如须要作废能够

new Draggable('#app',{
    cursorCancel:true
});

后期版本迭代

  • 增添AMD范例。

  • 增添事宜绑定接口。

  • 增添完美的毛病输出，轻易调试。

  • 加上zIndex接口，让挪动元素总在最顶层。

    原文作者：上啊比卡丘
    原文地址: https://segmentfault.com/a/1190000009424737
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞