I'；“我的发现”；“对象布局库”；关于JavaScript

您好，我正在搜索“对象布局库”，它正在使用JavaScript。 我想为我的web应用程序实现如下功能（查看此链接）

我已经搜索了信息，但找不到好的模块。你知道这样的图书馆吗？

好的，你要找的是

阅读要学习的文档，查看下面的代码片段，看看这是否是您想要的

函数dragMoveListener（事件）{ var target=event.target //在data-x/data-y属性中保持拖动位置 var x=（parseFloat（target.getAttribute（'data-x'））| | 0）+event.dx 变量y=（parseFloat（target.getAttribute（'data-y'））| | 0）+event.dy //翻译元素 target.style.webkitTransform= target.style.transform= '翻译（'+x+'px'，+y+'px）' //更新posiion属性 target.setAttribute（'data-x'，x） target.setAttribute（'data-y'，y） } window.onload=（）=>{ 交互（“.调整拖动大小”） .可调整大小({ //从所有边和角调整大小 边：{left:true，right:true，bottom:true，top:true}， 听众：{ 移动（事件）{ var target=event.target var x=（parseFloat（target.getAttribute（'data-x'））| | 0） 变量y=（parseFloat（target.getAttribute（'data-y'））| | 0） //更新元素的样式 target.style.width=event.rect.width+'px' target.style.height=event.rect.height+'px' //从上边缘或左边缘调整大小时平移 x+=event.deltaRect.left y+=event.deltaRect.top target.style.webkitttransform=target.style.transform= '翻译（'+x+'px'，+y+'px）' target.setAttribute（'data-x'，x） target.setAttribute（'data-y'，y） target.textContent=Math.round（event.rect.width）+'\u00D7'+Math.round（event.rect.height） } }, 修改器：[ //将边保持在父对象内 交互。修改器。限制边({ 外部：“家长” }), //最小尺寸 interact.modifiers.restrictSize({ 最小值：{宽度：100，高度：50} }) ], 惯性：正确 }) .拖拉({ 听众：{ //在每次dragmove事件中调用此函数 移动：dragMoveListener， //在每个dragend事件上调用此函数 完(活动){ var textEl=event.target.querySelector（'p'） textEl&（textEl.textContent）= “移动了一段距离”+ （Math.sqrt（Math.pow（event.pageX-event.x0，2）+ 数学pow（event.pageY-event.y0,2）|0）） .toFixed（2）+“px”） } }, 惯性：没错， 修改器：[ interact.modifiers.restrictRect({ 限制：'父'， 内：对 }) ] }) }

。调整拖动的大小{
背景色：#29e；
颜色：白色；
字体大小：20px；
字体系列：无衬线；
边界半径：8px；
填充：20px；
触摸动作：无；
宽度：120px；
/*这让事情变得容易多了*/
框大小：边框框；
}

从任何边或角调整大小

谢谢！我了解如何实现这些对象！太可怕了！