Draggabilly插件dom移动

最新推荐文章于 2024-09-13 22:50:19 发布

飞来一只PIG�

最新推荐文章于 2024-09-13 22:50:19 发布

阅读量340

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Draggabilly

本文链接：https://blog.youkuaiyun.com/weixin_43864045/article/details/87686853

Draggabilly 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何下载及使用Draggabilly插件，实现网页元素的拖拽功能。通过导入插件、创建实例并指定拖拽元素和触发器，使页面交互更加灵活。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载Draggabilly插件

然后在组件中引用

import Draggabilly from 'draggabilly'; // 元素移动用

并用以下方法创建Draggabilly实例，可以放在dom加载之后

/* eslint-disable no-new */ // 这条注释要带，消除eslint带来的报错
new Draggabilly('.bigTitle'/*这个是移动的元素的class名称*/, { // 上边注释要带消除eslint报错  containment: 'body', // 在那个dom范围下进行移动，一般选取body
  handle: '.al_move' // 鼠标点击拖拽的dom的class名
});

注：两个class名称必须都要放在dom上，不然会报错