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

微小的拖动移动JavaScript库 - dragmove.js
栏目分类:拖放   发布日期:2021-08-18   浏览次数:

一个很小的拖放库,通过单击拖动手柄并按住鼠标,可以拖动任何 DOM 元素。

如何使用它:

1. 使用 NPM 安装 dragmove.js 包。

# NPM
$ npm i @knadh/dragmove --save


2. 将 dragmove.js 作为 ES 模块导入。

import { dragmove } from @knadh/dragmove;


3. 为元素添加一个拖动手柄。

<div id="example">
  <div class="handle">拖动这里</div>
</div>

4. 对元素应用拖放功能。

dragmove(document.querySelector(“#example”), document.querySelector(“#example .handle”))

5. 使可拖动元素在视口的边界内移动。

<div id="example" data-drag-bound="true">
  <div class="handle">拖动这里</div>
</div>

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

const snapThreshold = 50;
function onStart(el, x, y) {
  // 在拖动开始时,移除固定底部样式以防止底部
  // 从粘在屏幕上。
  el.style.top = el.offsetTop + "px"
  el.style.bottom = "auto"
}
function onEnd(el, x, y) {
  // 自动捕捉到角落。
  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"
  }
}
dragmove(document.querySelector("#example"), document.querySelector("#example .handle"), onStart, onEnd)



官方网站:https://github.com/knadh/dragmove.js

相关热词: dragmove.js拖动

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