博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue使用dragula_使用Dragula轻松将拖放添加到网站
阅读量:2534 次
发布时间:2019-05-11

本文共 747 字,大约阅读时间需要 2 分钟。

是否在寻找免费的库来处理拖放功能 ? 然后是您唯一需要的资源。

这个免费的脚本使您可以为页面上的任何元素添加拖放功能 。 这包括对 & 框架的支持以及香草JavaScript。

Dragula的设置非常简单,并且附带了许多针对用户行为的自定义触发器 。 这意味着您可以在用户拖动项目,单击项目或重新排列页面的任何部分后触发自己的功能。

Dragula主页

如果您观看了您将找到一些代码片段可用的示例

Dragula设置仅需要一个JavaScript文件即可运行。 虽然,额外的选项可能会引起一些混乱。

例如,假设您有两个容器#left#right ,它们要支持可拖动项目。 您需要手动将这些容器添加到Dragula函数中,以支持拖放方法。

如果您的不太了解,那么您将很难使用Dragula。 但是, 有很多很棒的示例,您可以跟随它们 ,甚至可以复制代码段

这是GitHub文档中的一个示例,说明了如何定位两个(左右)容器

dragula([document.querySelector('#left'), document.querySelector('#right')]);

请注意,如果您在GitHub页面上进一步查看,则会找到大量可以传递给此功能的选项

您可以选择是复制还是移动项目哪个容器支持拖动的项目 ,甚至支持通过不同用户行为起作用的回调函数 ,例如:

  • 悬停在容器上
  • 初始点击和拖动事件
  • 掉落事件
  • 将元素放出边界
  • 通过拖动来克隆元素/容器

该库将进行一些初步的工作,但是如果您熟悉JavaScript,那么它应该很简单。

查看以了解其工作原理获得一些代码示例提示 。 Dragula是一个庞大的库,它可能是处理拖放操作的最佳开源脚本,并且具有最广泛的自定义范围

Dragula拖放

翻译自:

转载地址:http://gfezd.baihongyu.com/

你可能感兴趣的文章
小D课堂 - 新版本微服务springcloud+Docker教程_6-01 微服务网关介绍和使用场景
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_5-05熔断降级服务异常报警通知
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_6-03 高级篇幅之zuul常用问题分析
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_5-08 断路器监控仪表参数
查看>>
小D课堂 - 新版本微服务springcloud+Docker教程_6-02 springcloud网关组件zuul
查看>>
小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_2-1.快速搭建SpringBoot项目,采用Eclipse...
查看>>
小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_1-4.在线教育后台数据库设计...
查看>>
小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_2-3.热部署在Eclipse和IDE里面的使用...
查看>>
小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_1-3.在线教育站点需求分析和架构设计...
查看>>
小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_2-4.后端项目分层分包及资源文件处理...
查看>>
小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_2-2.快速搭建SpringBoot项目,采用IDEA...
查看>>
小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_3-5.PageHelper分页插件使用
查看>>
小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_5-6.微信扫码登录回调本地域名映射工具Ngrock...
查看>>
小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_5-8.用户模块开发之保存微信用户信息...
查看>>
Linux下Nginx安装
查看>>
LVM扩容之xfs文件系统
查看>>
Hbase记录-client访问zookeeper大量断开以及参数调优分析(转载)
查看>>
代码片段收集
查看>>
vue-cli3创建项目时报错
查看>>
输入1-53周,输出1-53周的开始时间和结束时间
查看>>