本文主要分析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端口可用 请参考相关说明'