曾经,我非常羡慕那些人见人爱的人,我也想要变成那样,可是后来我才明白人见人爱也是需要天赋的,后来我开始默默努力,我想,就算我不能让每个人都喜欢我,至少因为我做的努力能得到别人的尊重。

murri

 
安装
npm install murri —save
 
如果需要drag,需要依赖hammer.js,可以通过js script引入:
 
 
使用
HTML
最少需要class为grid、item、item-content的div,其中grid的作用是自适应布局,item是区分每个元素,item-content用于动画设置;
<div class="grid">
    <div class="item">
        <div class="item-content">
            <!-- Safe zone, enter your custom markup -->
            This can be anything.
            <!-- Safe zone ends -->
        </div>
    </div>
 
    <div class="item">
        <div class="item-content">
        <!-- Safe zone, enter your custom markup -->
            <div class="my-custom-content">
            Yippee!
            </div>
        <!-- Safe zone ends -->
        </div>
    </div>
<div>
 
CSS
grid必须为relative,item必须为block以及absolute;另外item之间可以设置gap
.grid {
    position: relative;
}
.item {
    display: block;
    position: absolute;
    width: 48%;
    height: 200px;
    padding: 5px;
    margin: 10px;
    z-index: 1;
    background: #ccc;
    color: #fff;
}
.item.muuri-item-dragging {
    z-index: 3;
}
.item.muuri-item-releasing {
    z-index: 2;
}
.item.muuri-item-hidden {
    z-index: 0;
}
.item-content {
    position: relative;
    width: 100%;
    height: 100%;
}
 
Javascript
Muuri是一个构造函数,第一个参数接受一个元素或者字符串(内置了querySelector):
var grid = new Muuri('.grid');
如上是最简单的方式,这样就可以看到效果了,如果希望拖拽,可以做如下配置:
var grid = new Muuri('.grid’, {
    dragEnabled: true
});
即Muuri的第二个参数是一个object,默认的dragEnabled为false,所以如果希望拖动,需要设置为true。
 
 
配置
如果不做任何配置,则默认配置为:
{
  // Item elements
  items: '*',
 
  // Default show animation
  showDuration: 300,
  showEasing: 'ease',
 
  // Default hide animation
  hideDuration: 300,
  hideEasing: 'ease',
 
  // Item's visible/hidden state styles
  visibleStyles: {
    opacity: '1',
    transform: 'scale(1)'
  },
  hiddenStyles: {
    opacity: '0',
    transform: 'scale(0.5)'
  },
 
  // Layout
  layout: {
    fillGaps: false,
    horizontal: false,
    alignRight: false,
    alignBottom: false,
    rounding: true
  },
  layoutOnResize: 100,
  layoutOnInit: true,
  layoutDuration: 300,
  layoutEasing: 'ease',
 
  // Sorting
  sortData: null,
 
  // Drag & Drop
  dragEnabled: false,
  dragContainer: null,
  dragStartPredicate: {
    distance: 0,
    delay: 0,
    handle: false
  },
  dragAxis: null,
  dragSort: true,
  dragSortInterval: 100,
  dragSortPredicate: {
    threshold: 50,
    action: 'move'
  },
  dragReleaseDuration: 300,
  dragReleaseEasing: 'ease',
  dragHammerSettings: {
    touchAction: 'none'
  },
 
  // Classnames
  containerClass: 'muuri',
  itemClass: 'muuri-item',
  itemVisibleClass: 'muuri-item-shown',
  itemHiddenClass: 'muuri-item-hidden',
  itemPositioningClass: 'muuri-item-positioning',
  itemDraggingClass: 'muuri-item-dragging',
  itemReleasingClass: 'muuri-item-releasing'
}
 
布局:
layout: {
    fillGaps: false,
    horizontal: false,
    alignRight: false,
    alignBottom: false,
    rounding: true
},
如上配置指定的布局的默认排列方式 - 从左上方开始排还是从右上方开始排、从上往下排还是从左往右排,在这里都是可以指定的;
 
排序:
HTML
    <div class="grid">
        <div class="item" data-sort="4">
            <div class="item-content">
            one
            </div>
        </div>
        <div class="item" data-sort=“3">
            <div class="item-content">
            two
            </div>
        </div>
        <div class="item" data-sort=“2">
            <div class="item-content">
            three
            </div>
        </div>
        <div class="item" data-sort=“1">
            <div class="item-content">
            four
            </div>
        </div>
    </div>
 
Javascript
sortData: {
    foo: function (item, element) {
        let sortId = element.getAttribute('data-sort');
        return Number(sortId);
    }
},
 
grid.sort('foo');
 
如上所示我们可以在item上设置自定义属性data-sort,然后依次作为排序的依据;
 
拖动:
dragStartPredicate: {
    distance: 0,
    delay: 0,
    handle: '.drag-btn'
},
distance表示开始拖动前移动的距离,默认为0;delay表示拖动的延时;handle默认为false,认为整个item都是可以拖动的,但也可以接受一个字符串,使用querySelecor查询,这样我们就可以在每个item右上角设置一个按钮,只有点击这个按钮才能拖动;
 
拖动方向:
dragAxis: ‘x'
表示只能在x方向拖动,也可以设置为’y’,默认为null,表示x和y方向都可以拖动;
 
拖动排序:
dragSort: true,
表示是否允许拖动之后重新排序,默认是true,如果设置为false,那么就只能排序而不能更改位置;
 
拖动排序间隔:
dragSortInterval: 200
默认是200ms,这个值表示拖动之后每隔多少时间进行判断是否能够排序,显然这个时间越长,则排序进行的越缓慢,所以可以设置为0;
 
拖动排序断定:
dragSortPredicate: {
    threshold: 50,
    action: 'swap'
},
默认的action是move,但是对于拖动排序来说这种效果并不好,而swap的效果往往会更好一些 - 比如看板有两列,某列的上下两个元素之间可以直接拖动替换位置,即为swap;而threshold表示交换阈值,取值在0 - 100,这里的50表示当两个item之间交叉的部分超过50%时,就触发swap;
 
拖动释放动画时间:
dragReleaseDuration: 0,
这里的默认值是300,即在拖动释放之后从释放位置到正确位置移动的时间,如果设置为0表示释放之后会立即回到原位,这种效果在交互上也是非常不错的;
 
拖动释放动画:
dragReleaseEasing: 'ease',
就释放拖动之后回到原位的动画效果,默认为’ease’,也可设置为 ‘ease-out’ 等;
 
一些默认的class名称:
containerClass: 'muuri',
itemClass: 'muuri-item',
itemVisibleClass: 'muuri-item-shown',
itemHiddenClass: 'muuri-item-hidden',
itemPositioningClass: 'muuri-item-positioning',
itemDraggingClass: 'muuri-item-dragging',
itemReleasingClass: 'muuri-item-releasing'
这些名称都是可以根据自己的需要进行修改的;
 
我所需要的最终的配置为:
var grid = new Muuri('.grid', {
    layoutDuration: 600,
    sortData: {
        foo: function (item, element) {
            let sortId = element.getAttribute('data-sort');
            return Number(sortId);
        }
    },
    dragEnabled: true,
    dragStartPredicate: {
        distance: 0,
        delay: 0,
        handle: '.drag-btn'
    },
    dragAxis: null,
    dragSort: true,
    dragSortInterval: 0,
    dragSortPredicate: {
        threshold: 50,
        action: 'swap'
    },
    dragReleaseDuration: 200,
    dragReleaseEasing: 'ease',
});
 
grid.sort('foo');
 
 
Grid方法
Grid即通过 new Muuri() 或得到的实例,该实例默认有一些方法可以调用,下面一一介绍:
 
获取grid
var elem = grid.getElement()
获取grid这个element
 
获取item
var allItems = grid.getItems() // 获取到所有的item
 
var activeItems = grid.getItems().filter(function (item) {
  return item.isActive();
}); // 获取到active的item,即显示出来的item,这个active是在配置项中 items 中指定的,默认是 ‘*’
 
var firstItem = grid.getItems()[0]; // 获取到第一个item
 
更新item
grid.refreshItems(); // 更新所有的Item,主要是缓存的维度
grid.refreshItems([0, someElem, someItem]) // 更新特定的Item
 
同步DOM
grid.synchronize()
同步DOM元素,保证DOM的顺序结构和页面显示的顺序结构一致。如果我们使用了排序函数使得item顺序变化,但这时看DOM实际上是没有变的,所以如果希望保持一致就可以使用grid.synchronize()函数;
 
布局
grid.layout() // 根据配置项布局
grid.layout(true) // 根据配置项无动画的直接布局
grid.layout(function (items) {
    console.log(‘layout done');
}); // 布局,并定义回调函数,如果所有item布局结束即调用该回调函数
 
添加Item
Item可以通过grid.add(elements, [options])的方式添加到grid中,添加的过程中默认是添加到最后,添加之后会自动触发grid.layout(),另外如果你希望同步DOM可以使用grid.synchronize()来同步:
grid.add([elemA, elemB]) // 添加两个新的items到grid末尾
grid.add([elemA, elemB], { index: 0 }) // 添加两个新的items到grid开头
grid.add([elemA, elemB], { layout: false }) // 跳过自动layout
 
移除Item
grid.remove(0); // 移除第一个Item,但是该元素保持在DOM中
grid.remove([elemA, elemB], { removeElements: true }); // 移除Items以及相关的元素
grid.remove([elemA, elemB], { layout: false }); // 移除Items,并禁止layout
 
显示和隐藏
grid.show();
grid.hide();
 
过滤Item
grid.filter(function (item) {
    return item.getElement().hasAttribute(‘data-foo');
}); // 展示所有拥有data-foo属性的item
grid.filter(‘[data-foo]’); // 上述简写
grid.filter(‘.good’); // 展示有class为good的Items
 
Items排序
对Items排序, 有三种方式可以对Items进行排序;
//第一种排序方式: Sort items by data-id attribute value (ascending).
grid.sort(function (itemA, itemB) {
  var aId = parseInt(itemA.getElement().getAttribute('data-id'));
  var bId = parseInt(itemB.getElement().getAttribute('data-id'));
  return aId - bId;
});
 
//第二种排序方式  Sort items using the sort data keys (ascending).
grid.sort('foo bar’, {descending: true});
 
//第三种排序方式 Sort items with a presorted array of items.
grid.sort(presortedItems);
 
 
 
移动Items
grid.move(elemA, elemB, {action: ’swap'}); // 将elemA移动到elemB的位置,使用交换的方式
grid.move(0, -1); 将第一个Item移动到最后一个位置
 
移动Items到另外一个grid
gridA.send(0, gridB, -1); // 将gridA中的第一个Item移动到gridB中的最后位置,移动之后将会append到document.body后
 
销毁grid
grid.destroy(); // 销毁grid
grid.destroy(true); // 销毁grid并移除Item元素
 
 
 
Grid事件
在操作grid时会触发各种各样的事件,这里我们需要一一介绍:
 
同步:
在grid.synchronize();调用之后会触发下面的回调函数:
grid.on('synchronize', function () {
    console.log('Synced')
})
 
 
布局开始/结束:
在grid.layout()调用开始和之后触发下面的回调函数:
grid.on('layoutStart', function () {
    console.log('start')
})
grid.on('layoutEnd', function () {
    console.log('end');
});
 
添加Items触发下面的回调函数:
grid.on('add', function (items) {
  console.log(items);
});
 
移除Items触发下面的回调函数:
grid.on('remove', function (items, indices) {
  console.log(items, indices);
});
 
在grid开始show和结束show之后触发回调函数:
grid.on('showStart', function (items) {
  console.log(items);
});
 
grid.on('showEnd', function (items) {
  console.log(items);
});
 
在grid开始hide和结束hide之后触发回调函数:
grid.on('hideStart', function (items) {
  console.log(items);
});
 
grid.on('hideEnd', function (items) {
  console.log(items);
});
 
在grid.filter()函数调用之后触发:
grid.on('filter', function(shownItems, hiddenItems) {
    console.log('shown', shownItems)
    console.log('hidden', hiddenItems)
});
grid.filter('.table');
 
在grid.sort()函数调用之后触发:
grid.on('sort', function (currentOrder, previousOrder) {
    console.log('目前的顺序', currentOrder);
    console.log('之前的顺序', previousOrder);
});
grid.sort('foo');
 
在grid.move()函数调用之后触发:
grid.on('move', function (data) {
  console.log(data);
});
 
与grid.send()函数调用触发的相关事件:
grid.on('send', function (data) {
  console.log(data);
});
grid.on('beforeSend', function (data) {
  console.log(data);
});
grid.on('receive', function (data) {
  console.log(data);
});
grid.on('beforeReceive', function (data) {
  console.log(data);
});
 
 
drag相关事件
 
grid.on('dragInit', function (item, event) {
    console.log('拖拽初始化', event, item);
});
grid.on('dragStart', function (item, event) {
    console.log('拖拽开始', event, item);
});
grid.on('dragMove', function (item, event) {
    console.log('拖拽移动', event, item);
});
grid.on('dragScroll', function (item, event) {
    console.log('拖拽Scroll', event, item);
});
grid.on('dragInit', function (item, event) {
    console.log('拖拽初始化', event, item);
});
grid.on('dragEnd', function (item, event) {
    console.log('拖拽结束', event, item);
});
 
如果要记录拖拽的顺序,下面的事件尤为重要:
 
grid.on('dragStart', function (item, event) {
    console.log('拖拽开始 grid items', grid.getItems());
});
grid.on('dragEnd', function (item, event) {
    console.log('拖拽结束 grid items', grid.getItems());
});
 
drag释放
grid.on('dragReleaseStart', function (item) {
  console.log(item);
});
grid.on('dragReleaseEnd', function (item) {
  console.log(item);
});
 
drag销毁
grid.on('destroy', function () {
  console.log('Muuri is no more...');
});
 
 
Item 方法
每个Item都有相关的方法可以调用,下面一一介绍:
 
获取grid
var grid = item.getGrid();
 
获取Item对应的Element
var elem = item.getElement();
 
获取Item的宽度
var width = item.getWidth();
 
获取Item的高度
var height = item.getHeight();
 
获取Item的margin
var margin = item.getMargin();
 
获取Item相对于container元素的left和top值
var position = item.getPosition();
其中position是一个对象,有left和top属性,都是number类型的数字;
 
判断某个Item是否active
var isActive = item.isActive();
 
判断某个Item是否可见:
var isVisible = item.isVisible();
 
判断某个Item是否正在被拖拽:
var isDragging = item.isDragging();
 
判断某个Item是否已经被释放:
var isReleasing = item.isReleasing();
 
判断某个Item是否被销毁:
var isDestroyed = item.isDestroyed();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
posted @ 2018-11-29 17:53  Wayne-Zhu  阅读(...)  评论(...编辑  收藏

一分耕耘,一分收获。