介绍
Butter.js是一个基于JavaScript和CSS3实现的强大的可拖拽组件库，开发人员可以使用它创建拖拽式交互，而不必写大量的JavaScript来实现。
本文将作为一个 butter.js 的启动教程，将会介绍这个库的详细使用说明。
安装
但首先你需要找到npm并使用npm安装 butter.js 包。
npm install butter
在安装完成后，你可以像下面这样在你的代码中导入 butter.js。
import {Bread} from 'butter';使用
创建一个 draggable 组件
下面的代码将显示如何在 html 中创建一个 draggable 组件：
<div class="draggable"> <span>Drag me!</span> </div>
你可以使用 butter.js 函数来使元素可拖动。
-- -------------------- ---- -------
------ ------- ---- ---------
--- ---- - --- ------------------- -
------- --------------- -
------------------- -------------------------------
--
---------- --------------- -
----------------- -------------------------------
-
---
------------首先，我们在HTML中创建了一个类名为 draggable 的元素。
然后，我们使用 Butter.js 的 Bread 构造函数来创建拖动对象。
在构造函数中，第一个参数指定了拖动的元素。
第二个参数是一个“回调对象”，它定义了当用户拖动 draggable 元素时要执行的操作。
以上代码执行后，我们就可以拖动 .draggable 的元素并且可以看到这个元素的位置在不断的输出。
拖动多个元素
你可以使用 Bread 构造函数来拖动多个元素。以下代码显示了如何给多个元素添加拖动功能。
-- -------------------- ---- ------- ------ ------- ---- --------- --- ------- - ------------------------------------- ---------- - --- --- ---- - - -- - - --------------- ---- - ------------- - --- ------------------ - ------------------------------ -- - ----------------- ---
在这个例子中，我们使用 querySelectorAll() 方法选择所有带有类名 .button 的元素，然后通过循环创建了 Bread 对象。
最后在最后的地方调用 init 方法来执行拖动操作。
自定义拖动参数
Bread 构造函数接收一个可选的参数元素来接收设置。以下是可以设置的参数：
start：当拖动元素开始时调用此函数。dragging：当拖动元素时调用此函数。end：当拖动停止时调用此函数。
需要注意的是这里的三个参数都应该是一个函数。下面的代码展示了如何自定义拖动参数：
-- -------------------- ---- -------
------ ------- ---- ---------
--- ---------------- - -------------------------------------
------ - -
------ -- -- -
--------------------- ----------
--
--------- -- -- -
--------------------- -- -----------
--
---- -- -- -
--------------------- ----------
-
--
--------- - --- ----------------------- --------
-----------------拖动边界
默认情况下，拖动的元素可以在它的父元素内部任意拖动。但是，你可以通过设置参数来限制拖动的范围并限制元素只能在指定元素内拖动。
下面的代码将演示如何限制元素只能在容器#container内部拖动：
-- -------------------- ---- ------- ------ ------- ---- --------- --- ---------------- - ------------------------------------- ---------------- - ------------------------------------- --------- - --- ----------------------- - ------------ ---------------- --- -----------------
拖拽方式
但 Butter.js 并不局限于纯粹的鼠标拖拽。你还可以激活从HTML5拖放标准中引入的drop和drag事件。你可以将 useDrag 和 useDrop 参数传递给 Bread 构造函数以定义该元素应处于哪个状态。
以下代码演示了如何使用这些参数：
-- -------------------- ---- -------
------ ------- ---- ---------
--- ---------------- - -------------------------------------
-------- - ------------------------------------
--------- - --- ----------------------- -
------- - -----
-------- - ---------- -
--------------------- ------ ------------
-
---
--------- - --- --------------- -
------- - -----
----- - --------------- -
--------------------- ------ ------------
-
---
-----------------
-----------------固定位置
你可以使用固定位置来防止拖动元素跑出指定的区域。
下面的代码将演示如何使用固定位置：
-- -------------------- ---- -------
------ ------- ---- ---------
--- ---------------- - -------------------------------------
--------- - --- ----------------------- -
------------ -------------
----- - ----
------ - --------------- -
---------------------- -------------------------------
-
---
-----------------在这个例子中，我们在函数的参数中设置了 fixed: 'x'，这将使拖动元素在x轴上移动，而在y轴上保持相对位置不变。
类似的，你可以使用 fixed: 'y' ，便可以在y轴上移动而保持x轴位置不变。
通过在参数元素中混合使用 fixed : 'x' 和 fixed: 'y' ，你可以使元素固定在指定位置。
总结
但 Butter.js 是一个非常有助于前端开发的库。
在本教程中，我们已经了解了如何使用它功能强大的拖动API，以及如何自定义拖动参数，限制拖动范围，固定位置，以及如何使用拖放事件。
了解 Butter.js 的这些基础知识将帮助你从传统的编写 JavaScript 实现大范围拖动的方法中解放出来。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8eccdc64669dde5619