有很多关于如何使事物在网页中可拖动的教程。 jQuery是最简单的方法之一。您甚至不需要jQuery UI，只需鼠标方向功能的一点帮助，也许还有一些可选的处理即可。但是，如果您不想触摸任何jQuery代码但仍想使事物可拖动怎么办？然后， draggabilly.js是适合您的工具。

使用Draggabilly.js ，您可以使网页上的任何元素都可拖动。您可以自定义可拖动元素的行为，例如添加网格移动，将事件侦听器绑定到事件，将移动限制为仅x轴或y轴等等。它还支持各种浏览器 ，IE8 +甚至多点触控移动浏览器。

入门

首先，您只需要将Draggabilly.js源包括在您的站点中即可。不需要其他依赖项。您可以从GitHub抓取文件。

<script src="js/draggabilly.pkgd.min.js" type="text/javascript"></script>

至于其余的，您将按照以下方式使用一些javascript函数。

基本拖动

您需要在页面中包含以下代码段，以便进行拖动。

var elem = document.querySelector('#idHere');
var draggie = new Draggabilly( elem, {
  // options...
});

#idHere是您应放置在要使其可拖动HTML元素内的ID。在draggie变量中，您可以根据需要添加一个选项。如果不需要该选项，则还可以从elem变量定义id。

例如，如果我的ID #demo没有任何选项，那么我可以像这样编写代码段：

var elem = document.querySelector('#demo');
var draggie = new Draggabilly('#demo');

然后在HTML中，调用您希望变为可拖动的元素的ID。以下是一个基本示例。

<div class="demo-frame">
  <div class="justDemo">
    <div id="demo" class="relative">
      <div class="centered">Drag me</div>
    </div>
  </div>
</div>

还有许多其他方法可以影响Draggabilly的行为。您可以将拖动限制为仅在“ y”或“ x”轴上，如下所示：

new Draggabilly( '#demo', {
  axis: 'x'
});

或者，您可以添加一个处理选项，该选项将指定拖动交互的开始元素，如下所示：

var elem = document.querySelector('#demo');
new Draggabilly( elem, {
  handle: '.handle'
});

当所有内部元素（例如输入和表单）不需要可拖动时，此.handle选项很有用。您还可以添加许多其他选项，例如包含，网格，方法和事件。前往dragabbilly的官方主页查看完整文档。

最终思想

在大多数情况下，拖动功能对网页设计影响不大，但仍然非常重要。它最常发生在网络应用或游戏中。它安装简单，拖曳方法多种多样，因此非常实用。

翻译自: https://www.hongkiat.com/blog/draggable-elements-with-draggabilly-js/

js生成的元素怎么使用拖拽_使用Draggabilly.js使网站上的元素可拖动

入门

基本拖动

最终思想