Trucking 是一个轻量级的 JavaScript 库，它允许你轻松地实现在 DOM 元素之间拖放和调整大小的功能。它是基于 jQuery UI Sortable 和 Resizable 构建的，但相比这两个库而言更加轻便、易用。Trucking 支持 HTML5 drag and drop API，但也可以在不支持该 API 的浏览器中工作。在本文中，我们将详细介绍如何使用 Trucking。
安装
使用 npm 安装 Trucking：
npm install trucking
或者，您可以通过以下方式下载 Trucking：
- 从 GitHub 下载源代码
- 从 jsDelivr 获取预构建文件
使用 Trucking
Trucking 支持以下功能：
- 拖放功能
- 调整大小功能
- 反转、锁定和限制拖放、调整大小的元素
拖放功能
要在 DOM 元素之间实现拖放功能，您需要几个元素：
- 包含拖放元素的容器 div
- 拖动手柄元素
- 可拖动的元素
首先，您需要在页面中加入 Trucking 所需的 CSS 文件：
<link rel="stylesheet" href="path/to/trucking.css">
然后，您需要编写一些 JavaScript 代码来初始化 Trucking：
const container = document.querySelector('.container');
const handle = document.querySelector('.handle');
const draggable = document.querySelector('.draggable');
new Trucking(container, {
handle: handle,
items: '.draggable'
});这个初始化过程中，我们传入了 container、handle 和 draggable 三个元素，并使用 handle 作为拖动手柄元素，使用 items 选项指定可拖动的元素。
调整大小功能
除了拖放功能，Trucking 还支持调整大小功能。要实现此功能，您需要：
- 包含调整大小元素的容器 div
- 可调整大小的元素
在页面中加入以下 Trucking 所需的 CSS 文件：
<link rel="stylesheet" href="path/to/trucking-resizable.css"> <link rel="stylesheet" href="path/to/trucking-resizable-default-theme.css">
然后，初始化 Trucking：
const container = document.querySelector('.container');
const resizable = document.querySelector('.resizable');
new Trucking(container, {
resizable: resizable
});反转拖放、调整大小功能的元素
您也可以反转 Trucking 的拖放、调整大小功能。例如，禁用拖放功能：
const container = document.querySelector('.container');
new Trucking(container, {
disableDraggable: true
});要禁用只调整大小的元素，您需要：
const container = document.querySelector('.container');
new Trucking(container, {
disableResizable: true
});锁定拖放、调整大小功能的元素
您可以锁定不允许拖动和调整大小的元素。例如：
const container = document.querySelector('.container');
new Trucking(container, {
disableDraggable: true,
disableResizable: true
});限制拖放、调整大小元素的最大、最小值
您还可以限制拖放和调整大小元素的最大、最小值。例如：
-- -------------------- ---- -------
----- --------- - -------------------------------------
----- --------- - -------------------------------------
--- ------------------- -
------ -------------
------- -
---------- ----
---------- ----
--------- ----
--------- ---
-
---为了使元素始终保持方形，您可以使用 aspectRatio 选项：
const container = document.querySelector('.container');
const resizable = document.querySelector('.resizable');
new Trucking(container, {
resizable: resizable,
aspectRatio: true
});结束语
Trucking 是一个功能强大的 JavaScript 库，它能够轻松处理拖放和调整大小等常见 DOM 元素操作。无论您是在开发桌面应用程序还是在编写 Web 应用程序，Trucking 都是一个不错的选择。希望本篇文章能够为您提供有关如何使用 Trucking 的详细指南，以及有关该库的深入了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601181e8991b448de03c