web页面拖放效果的实现

本文主要分析dnd.js拖放操作的实现
1.概述:dnd.js主要提供了两个对象给我们使用,一个Drag,一个Drop。可以认为一个是用来拖动的元素,另外一个是用来放下的区域,实际上也确实是这么用的。
2.主要的使用方法:
创建一个拖动元素 new Drag…,和一个拖放区域 new Drop,然后在回调函数里面实现你想要的逻辑,重要的是回调函数。随着拖放动作的进行,这包括一系列的拖放动作,
对于被拖放的元素来说,动作有:
拖动开始、拖动结束,这个时候分别传送一个函数给这一事件(也就是所谓的回调函数),这个函数只能接受一个参数,我们假设这个参数名字是params,params中的内容几乎可以让你进行无限的操作。那么先看看params有哪些,你又可以怎样操作你的拖放过程呢?
data:Drag对象包含的数据,这个必须是数字?
el:指向页面的元素和相关的css属性等
methods:dnd提供的一些操作该元素的方法,这个有很多,比如

showStateIcon(某一个state),state包括warn等。
在dnd.js中的定义是这样的:

  /**
   * 显示状态icon
   * url 可以是图片绝对路径 也可以是 add | error | delete
   */
  showStateIcon: function showStateIcon(url) {
   
    var _this3 = this;

    setTimeout(function () {
   
      if (_this3.isMobile) return console.warn('showStateIcon仅在pc端口可用 请参考相关说明'
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值