在前端开发中，拖拽和调整组件的大小是常见的交互需求。为了实现这个功能，我们可能需要写很多重复的代码。如果你正在寻找一款轻量级的拖拽和调整大小的 npm 包，那么 x-dragandresize 可能是一个不错的选择。
什么是 x-dragandresize
x-dragandresize 是一款小巧方便的拖拽和调整大小库。它不依赖于 jQuery 或其他库，仅仅依赖于浏览器原生的事件机制。
如何使用 x-dragandresize
使用 x-dragandresize 非常简单。只需要通过 npm 安装即可：
npm install x-dragandresize --save
然后在需要使用的地方引入即可：
import { xDragAndResize } from 'x-dragandresize';接下来，我们来看一下如何实现拖拽和调整大小两个功能。
实现拖拽功能
实现拖拽功能非常简单。只需要调用 xDragAndResize 函数，传入需要拖拽的元素即可：
const dragElement = document.getElementById('drag');
xDragAndResize(dragElement);此时，我们就可以实现将 drag 元素拖拽到任意位置的功能。
实现调整大小
调整大小需要传入两个参数，一个是需要调整大小的元素，一个是一个配置对象，可以设置最小和最大宽度和高度。
const resizeElement = document.getElementById('resize');
xDragAndResize(resizeElement, {
minWidth: 50,
minHeight: 50,
maxWidth: 500,
maxHeight: 500
});这样，我们就可以实现将 resize 元素调整大小的功能了。
示例代码
为了更好的理解 x-dragandresize 如何使用，在这里提供一下实现一个可拖拽、可调整大小的元素的代码示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
----- ---------------------------- ----------------- --
---------------------- ----------
-------
----- -
------ ------
------- ------
----------------- -----
--------- ---------
-
------- -
------ ------
------- ------
----------------- -----
--------- ---------
------- --
------ --
-
--------
-------
------
---- ----------------
---- ------------------
------- --------------------------------------------------------------------------
--------
----- ----------- - --------------------------------
----------------------------
----- ------------- - ----------------------------------
----------------------------- -
--------- ---
---------- ---
--------- ----
---------- ---
---
---------
-------
-------总结
x-dragandresize 是一个非常方便的拖拽和调整大小的 npm 包。它的使用非常简单，只需要传入需要拖拽或调整大小的元素即可。在实际项目开发中，我们可能需要实现这种功能多次，此时使用 x-dragandresize 可以为我们省去很多重复劳动。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006733d890c4f727758356d