Vue拖拽插件——Draglua 中文使用教程

2019-05-17 本文已影响0人咆哮小狮子

声明

本人也在不断的学习和积累中，文章中有不足和误导的地方还请见谅，可以给我留言指正。希望和大家共同进步，共建和谐学习环境。

特征

超级容易设置
没有臃肿的依赖
自己计算排序顺序
物品将被丢弃的阴影提供视觉反馈
触摸事件！
无需任何配置即可无缝处理点击

安装

1、npm安装

   npm install dragula --save

2、bower安装

   bower install dragula --save

3、CDN

<script src='https://cdnjs.cloudflare.com/ajax/libs/dragula/$VERSION/dragula.min.js'></script>

注：最好放在<body>中引用，不要放在<head>中。

css

需要引入一些css样式，在页面中引入dist/dragula.css或dist/dragula.min.css，如果你使用的是Stylus，你可以这样引入

@import 'node_modules/dragula/dragula'

方法

dragula(containers?, options?)

dragula 允许在containers中间互相拖动，如果拖动到containers之外的元素时，会根据 revertOnSpill 和removeOnSpill 的配置终止操作。
请注意，拖动仅在左键单击时触发

下面的示例允许用户将元素从中left拖入right和从中right拖入left

dragula([document.querySelector('#left'), document.querySelector('#right')]);

您还可以提供一个options对象。以下是默认值的介绍

dragula(containers, {
  isContainer: function (el) {
    return false; // 点击和拖动都会触发，drake.containers元素将被考虑
  },
  moves: function (el, source, handle, sibling) {
    return true; // 一直能拖动，拖动时触发
  },
  accepts: function (el, target, source, sibling) {
    return true; // 元素可以放在任何`container`中
  },
  invalid: function (el, handle) {
    return false; // 默认情况下不会阻止任何拖动
  },
  direction: 'vertical',             //元素的排放方向
  copy: false,                       // 拖动的元素是否为副本
  copySortSource: false,             // 复制的源容器重新排序
  revertOnSpill: false,              // 是否将拖到容器外的元素放回原处
  removeOnSpill: false,              // 是否将拖到容器外的元素删除
  mirrorContainer: document.body,    // 设置获取附加镜像元素的元素
  ignoreInputTextSelection: true     //允许用户选择输入文本
});

您可以省略container参数，稍后动态添加容器。

var drake = dragula({
  copy: true
});
drake.containers.push(container);

还可以从options对象设置容器

var drake = dragula({ containers: containers });

你还可以设置一个没有container和options的draglua

var drake = dragula();

options对象详解：

containers:

和dragula(containers?, options?)的第一个参数效果是一样的。

isContainer:

containers，您还可以使用此方法指定任何类型的逻辑，这些逻辑定义了这个特定drake实例的containers
下面的示例使用一个CSS类dragula-container动态地处理所有DOM元素，将它们作为这个drake的dragula容器。
var drake = dragula({
isContainer: function (el) {
   return el.classList.contains('dragula-container');
 }
});

moves:

您可以定义一个moves方法，当单击一个元素时，它将被调用(el、source、handle、sibling)。如果此方法返回false，则不会开始拖动事件，也不会阻止该事件。handle元素将是原始的单击目标，这便于测试该元素是否是预期的“drag handle”。

accepts:

您可以将accept设置为具有以下签名的方法:(el、target、source、sibling)。它将被调用，以确保来自source的元素el可以在sibling元素之前被拖放到容器target上。sibling元素可以为null，这意味着元素将作为容器中的最后一个元素放置。注意如果options .copy被设置为true, el将被设置为copy，而不是原来拖动的元素。

还要注意，拖动开始的位置始终是放置元素的有效位置，即使在所有元素accepts都返回false。

copy:

如果copy被设置为true(或返回true的方法)，那么项目将被复制，而不是移动。这意味着下列差别:
drag ---- move: 元素将从源中隐藏 / copy: 什么都不会发生
drop ---- move:元素将被移动到目标中 / copy: 元素将克隆到目标
remove----move:元素将从DOM中删除 / copy: 什么都不会发生
cancel----move:元素将保留在源代码中/ copy: 什么都不会发生

如果传递了一个方法，则无论何时开始拖拽一个元素，都会调用该方法，以决定它是否应该遵循复制行为。考虑下面的例子。
copy: function (el, source) {
 return el.className === 'you-may-copy-us';
}

copySortSource:

如果copy被设置为true(或返回true的方法)，copySortSource也为true，那么用户将能够对复制源容器中的元素进行排序。

revertOnSpill:

默认情况下，将元素溢出到任何容器外将会将元素移回反馈阴影预览的放置位置。将revertOnSpill设置为true将确保将任何经过批准的容器外的元素移回拖放事件开始的源元素，而不是停留在反馈阴影预览的拖放位置。

removeOnSpill:

默认情况下，将元素溢出到任何容器外将会将元素移回反馈阴影预览的放置位置。将removeOnSpill设置为true将确保从DOM中删除任何经过批准的容器之外的元素。注意，如果copy被设置为true，那么remove事件不会触发。

direction:

当一个元素被放到容器中时，它将被放置在鼠标被释放的位置附近。如果方向为“vertical”(默认值)，则将考虑Y轴。否则，如果方向为“horizontal”，则考虑X轴。

invalid:

您可以提供一个带有(el, handle)签名的无效方法。对于不应该触发拖动的元素，此方法应该返回true。handle参数是被单击的元素，而el是要拖动的项。这是默认实现，它不阻止任何拖动。
function invalidTarget (el, handle) {
 return false;
}
请注意，invalid将在被单击的DOM元素和drake容器的每个父元素及其直接子元素上调用。

例如，当单击的元素(或其任何父元素)是锚标记时，可以将invalid设置为return false。
invalid: function (el, handle) {
 return el.tagName === 'A';
}

mirrorContainer:

拖动时显示镜像元素的DOM元素将被附加到其中。默认为document.body

ignoreInputTextSelection:

当启用此选项时，如果用户单击输入元素，则在鼠标指针退出输入之前不会开始拖动。这意味着用户可以在包含在draggable元素中的输入中选择文本，并且仍然可以通过将鼠标移到输入之外来拖动该元素——这样您就可以同时使用这两种方法。

默认情况下启用此选项。通过设置为false来关闭它。如果禁用了它，用户将无法用鼠标在dragula容器的输入中选择文本。

API：

dragula方法返回一个带有简洁API的小对象。我们将把dragula返回的API称为drake。

drake.containers

此属性包含构建此drake实例时传递给dragula的容器集合。您可以随意push更多的容器和拼接旧容器。

drake.dragging

每当拖动元素时，此属性将为true。

drake.start(item)

进入没有阴影的拖动模式。当为现有的拖放解决方案提供互补的键盘快捷方式时，此方法非常有用。虽然一开始不会创建阴影，但是用户只要单击项目并开始拖动它，就会得到阴影。注意，如果他们单击并拖动其他内容，.end将在获取新项目之前被调用。

drake.end()

优雅地结束拖放事件，就像使用预览阴影标记的最后一个位置作为拖放目标一样。cancel或drop事件将被触发，这取决于该项目是否被拖回到最初被提取的地方(本质上是一个被视为cancel事件的no-op)。

drake.cancel(revert)

如果当前正在拖拽drake管理的元素，此方法将优雅地取消拖拽操作。您还可以在方法调用时传递revert，有效地生成与revertOnSpill为true时相同的结果。

注意，“取消”只会在以下场景中导致取消事件。
1、revertOnSpill 为 true
2、Drop target(如反馈阴影预览的那样)是源容器，项目将被放置在最初拖动它的位置

drake.remove()

如果当前正在拖拽drake管理的元素，此方法将优雅地将其从DOM中删除。

drake.on (Events)

drake是一个事件发射器。drake.on(type, listener)可以使用drake跟踪以下事件。

Events:

drag,(el, source) —— el被从source 移除

dragend,(el) —— el的拖动事件以cancel、remove或drop结束

drop,(el, target, source, sibling) ——el在sibling元素之前被放入target 中，最初来自 source

cancel,(el, container, source) —— el被拖着走，但它什么也没得到，又回到了它最后一个稳定的container里;el最初来源于source

remove,(el, container, source) —— el被拖着走了，被从DOM中移除。它最后一个稳定的父类是container，最初来自source

shadow,(el, container, source) —— el，视觉辅助阴影，被移动到container中。当el位置发生变化时，即使在同一容器内，也可能多次触发;el最初来源于source

over,(el, container, source) —— el是over container，最初来自source

out,(el, container, source) —— el被拖出容器或被丢弃，最初来自source

cloned,(clone, original, type) —— DOM元素original被克隆为clone，类型为('mirror'或'copy')。为镜像和复制时触发:true

drake.canMove(item)

返回drake实例是否可以接受DOM元素项的拖动。当满足下面列出的所有条件时，此方法返回true，否则返回false。

item是drake指定容器之一的子容器

item通过相关的无效检查

item通过移动检查

drake.destroy()

删除dragula用于管理容器之间拖放的所有拖放事件。如果在拖动元素时调用.destroy，则该拖动将被有效地取消。

css：

Dragula只使用四个CSS类。下面将快速解释它们的用途

gu-unselectable ----- 在拖动时添加到mirrorContainer元素。您可以在拖动对象时使用它来设置mirrorContainer的样式。
gu-transit ----- 在拖动源元素的镜像时将其添加到源元素。它只是增加了不透明度。
gu-mirror ----- 被添加到镜像中。它处理fixed 定位和z-index(并删除元素上的任何先前的边距)。注意，镜像被附加到mirrorContainer，而不是它的初始容器。当使用嵌套规则对元素进行样式化时，请记住这一点，比如.list .item {padding: 10px;}
gu-hide ----- 是一个帮助类，用于对元素应用display: none。

默认：

.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
}
.gu-hide {
  display: none !important;
}
.gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
.gu-transit {
  opacity: 0.2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
}

参考

Github/dragula

Vue拖拽插件——Draglua 中文使用教程

声明

特征

安装

css

方法

dragula(containers?, options?)

options对象详解：

containers:

isContainer:

moves:

accepts:

copy:

copySortSource:

revertOnSpill:

removeOnSpill:

direction:

invalid:

mirrorContainer:

ignoreInputTextSelection:

API：

drake.containers

drake.dragging

drake.start(item)

drake.end()

drake.cancel(revert)

drake.remove()

drake.on (Events)

drake.canMove(item)

drake.destroy()

css：

参考

猜你喜欢

热点阅读