包大小

开发

**Draggable不再由其原作者维护。**此仓库的维护已交接给新的协作者，不再由Shopify的任何人负责。

**我们仍在寻找更多的维护者！**如果有人有兴趣回答/分类问题、审核/拒绝/批准PR，以及编写代码修复bug/添加新功能 —— 请发送电子邮件至max.hoffmann (at) shopify (dot) com。在获得协作权限之前，您可能会被问几个问题，但如果一切顺利，我们将很高兴将您添加为协作者。

使用Draggable完全控制拖放行为！Draggable将原生浏览器事件抽象为全面的API，以创建自定义拖放体验。Draggable附带额外模块：Sortable、Droppable、Swappable。Draggable本身在拖动时不执行任何排序行为，但会完成繁重的工作，例如创建镜像、发出事件、管理传感器事件、使元素可拖动。

这些额外模块建立在Draggable之上，因此提供类似的API接口，更多信息请阅读下面的文档。

特性

适用于原生拖动、鼠标、触摸和压力触摸事件
可以通过挂钩到draggable的事件生命周期来扩展拖动行为
可以通过向draggable添加传感器来扩展拖动检测
该库首选ES6目标

安装

您可以通过npm安装该库。

npm install @shopify/draggable --save

或通过yarn：

yarn add @shopify/draggable

或通过CDN

<!-- 整个包 -->
<script type="module">
  import {
    Draggable,
    Sortable,
    Droppable,
    Swappable,
  } from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/index.mjs';
</script>
<!-- 仅Draggable -->
<script type="module">
  import Draggable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Draggable/Draggable.mjs';
</script>
<!-- 仅Sortable -->
<script type="module">
  import Sortable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Sortable/Sortable.mjs';
</script>
<!-- 仅Droppable -->
<script type="module">
  import Droppable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Droppable/Droppable.mjs';
</script>
<!-- 仅Swappable -->
<script type="module">
  import Swappable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Swappable/Swappable.mjs';
</script>
<!-- 仅插件 -->
<script type="module">
  import * as Plugins from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Plugins/index.mjs';
</script>
<!-- UMD浏览器 -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable/build/umd/index.min.js"></script>
<script>
  console.log(window.Draggable);
</script>