当前位置:主页 > JavsScript库 > 拖放 >

可拖动和可调整大小的库 - resizedrag.js
栏目分类:拖放   发布日期:2021-08-27   浏览次数:

一个使 DOM 元素可拖动(可移动)和可调整大小的小型 JavaScript 库。

如何使用它:

1. 使用 NPM 安装并导入 resizedrag.js。

# NPM
$ npm i resizedrag --save
 
import { resizedrag } from 'resizedrag';

2. 在目标 DOM 元素上初始化 resizedrag.js 并使用以下data属性配置可拖动和可调整大小的行为:

  • data-rd-drag-enabled:启用可拖动。默认值:true。

  • data-rd-min-height:以像素为单位的最小高度。默认值:5。

  • data-rd-min-width:以像素为单位的最大高度。默认值:5。

  • data-rd-drag-border-enabled:拖动时显示边框。默认值:true。

<div class="drag-widget-container"
     id="example"
     data-rd-drag-enabled="false"
     data-rd-min-height=25 
     data-rd-min-width=25 
     data-rd-drag-border-enabled="false"
     >
</div>
// resizedrag(target, handler, onStart, onEnd);
resizedrag(document.querySelector("#example"),document.querySelector("#example"));

3. 使用开始/结束事件来模拟“对齐边缘”行为。

const snapThreshold = 50;
function onStart(el, x, y) {
  // 在拖动开始时,移除固定的底部样式以防止底部
  // 粘在屏幕上。
  el.style.top = el.offsetTop + "px"
  el.style.bottom = "auto"
}
function onEnd(el, x, y) {
  console.log('end');
  // 自动捕捉到角落。
  if (window.innerHeight - (el.offsetTop + el.offsetHeight) < snapThreshold) {
      el.style.top = "auto"
      el.style.bottom = "0px"
  }
  if (window.innerWidth - (el.offsetLeft + el.offsetWidth) < snapThreshold) {
      el.style.left = "auto"
      el.style.right = "0px"
  }
  if (el.offsetTop < snapThreshold) {
      el.style.top = "0px"
  }
  if (el.offsetLeft < snapThreshold) {
      el.style.left = "0px"
  }
}
resizedrag(document.querySelector("#example"),document.querySelector("#example"), onStart, onEnd);


官方网站:https://github.com/MurugappanVR/resizedrag.js

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库