aralejs / dnd Goto Github PK

View Code? Open in Web Editor NEW

17.0 21.0 12.0 851 KB

Drag and Drop

License: MIT License

JavaScript 100.00%

dnd's Introduction

Dnd

Drap & Drop

配置说明

属性

element element[Array]|selector

可拖放的元素, 即源节点

注: 支持多个元素, 非法时抛出异常

containment element[Array]|selector|null

拖放的边界, 默认为document

注: 只取第一个元素, element初始必须要位于containment的内部

proxy element[Array]|selector|null

代理元素, 实际上跟随鼠标移动的元素, 默认null为源节点element的clone

注: 只取选择器中的第一个元素

drops element[Array]|selector|null

可放置容器, 默认null为无

注: 可以有多个元素

disabled boolean

是否禁止该元素拖放, 默认false为不禁止

visible boolean

被拖放的元素在源位置上是否可见, 默认false为不可见

axis 'x'|'y'|false

拖放指定的方向, 默认false为任意方向

revert boolean

是否返回源节点初始位置, 默认false为不返回

注: 当可放置容器不为null并且当前可放置容器为null时释放鼠标, 将返回源节点初始位置

revertDuration number

返回速度, 默认为500

注: 源节点显示(visible = true)时, 拖放结束时移动到拖放位置的速度也取此值

draqCursor string

拖放过程中没进入放置容器drop时光标形状, 默认为"move"

dropCursor string

拖放过程中进入放置容器drop时光标的形状, 默认为"copy"

zIndex number

代理元素proxy拖放过程中的z-index, 默认为9999

API

Dnd(element, config)

构造函数, element不能为空

注: element为空会抛出异常, config应为简单对象

set(option, value)

设置配置属性, element不能设置

注: 一切set设置应在拖放前

get(option)

获取配置属性

注: 配置属性为DOM元素的, 均返回其jquery对象

open()

静态方法, 用Dnd直接调用, 开启页面的拖放功能

注: 默认use dnd组件就自动open了

close()

静态方法, 用Dnd直接调用, 关闭页面的拖放功能

事件

dragstart (dataTransfer, proxy)

dataTransfer为拖放数据, proxy为代理元素(元素对象均为jquery对象); 拖放开始时触发（按下鼠标并且至少移动1px), 常用来设置拖放数据dataTransfer

drag (proxy, drop)

proxy为代理元素, drop为当前可放置容器拖放中一直触发, 直到鼠标释放

注: drop有可能为空

dragenter (proxy, drop)

proxy为代理元素, drop为当前可放置容器鼠标刚进入可放置容器中触发

dragover (proxy, drop)

proxy为代理元素, drop为当前可放置容器鼠标在可放置容器中移动一直触发

dragleave (proxy, drop)

proxy为代理元素, drop为当前可放置容器鼠标刚离开可放置容器时触发

drop (dataTransfer, proxy, drop)

proxy为代理元素, drop为当前可放置容器鼠标在可放置容器中释放时触发, 常用来读取dataTransfer值

dragend (element, drop)

element为源节点元素, drop为当前可放置容器; 拖放结束后触发, 常和dragleave处理相同, 用来取消dragenter中的设置

注: 当没触发drop时, drop为null;

data-attr实现拖放

在data-attr上进行配置

data-dnd=true data-config为JSON字符串, 详细见演示

注: 这种方式不支持dataTransfer和一系列事件, 只是简单拖放

最佳实践

带有语义(拖放数据)的拖放

seajs.use(['dnd', '$'], function(Dnd, $){

    var proxy = document.createElement('img'),
        dnd = null ;

    $(proxy).on('load', function(){
        dnd = new Dnd('#drag', {
            drops: '#drop',
            proxy: proxy,
            visible: true, 
            revert: true
        }) ;

        // dataTransfer为拖放数据，传输信息
        dnd.on('dragstart', function(dataTransfer, proxy){
            dataTransfer.data = '玉伯也叫射雕' ;
        })
        dnd.on('dragenter', function(proxy, drop){
            drop.addClass('over') ;
        })
        dnd.on('dragleave', function(proxy, drop){
            drop.removeClass('over') ;
        })
        dnd.on('drop', function(dataTransfer, proxy, drop){
            if(typeof(dataTransfer.data) !== 'undefined'){
                drop.text(dataTransfer.data) ;
            }
        })
        dnd.on('dragend', function(element, drop){
            if(drop) drop.removeClass('over') ;
        })
    })
    $(proxy).css('width', 50) ;
    $(proxy).css('height', 50) ;
    proxy.src = 'http://tp3.sinaimg.cn/1748374882/180/40020642911/1' ;
});

用data-attr来实现的简单拖放

<button data-dnd=true>I can drag</button>

dnd's People

Contributors

Stargazers

Watchers

Forkers

lianqin7 ustccjw angel-fund stringify q13 lynzz honger05 minlingchao1 blog-lyn peirancao yangjiqiao86

dnd's Issues

感觉element只取第一个元素的功能不够用

如果有一个tableview，要能拖拽超过100行以上的tr，怎么办？

tags 1.0.0

基本按照review和大家的建议进行修改

主要fix如下：

实例放在全局的一个管理对象上，data-api 上存放实例的 id
containment 默认改为 document
open， close 方法放到类静态方法中
从自身开始向上追朔，查询最近的具有dnd功能的元素触发拖放
proxy作为源节点element的兄弟元素插入，解决了父元素对样式影响
事件绑定时，事件名称用空格分隔
css({}) 代替 css(propertie, value)
移除了所有配置属性的合法性检查，只保留对源节点element的合法性检查

还有几个问题：

revert 可增加到上一次定位的位置
这个要不要实现？如果实现，怎么实现比较合理的，怎么区分开上一次位置和初始位置，增加一个属性吗
关于变量命名，吐槽者很多，大家有什么好的建议可以提提

dnd的分类讨论

个人觉得放在工具会比 UI组件 更合适

毕竟 Dnd(element, config) 的接口设计和 整个 arale widget 体系的差异 很大

组件设计讨论

叁儿和欧阳靖主导，先把 README 搞好，其他人可以提提建议。

请问，dnd地 drop多目标该如何设置？假设目标div3个的id分别为的d1 d2 d3 drop:['#d1','#d2','#d3'],但是获取的却只是第一个，即的d1，求解？

若源节点属于proxy，拖动失效

new Dnd('#b', { proxy: '#a' });

b属于a子节点,

直接挂掉;

一个变通的方法，设置new Dnd('#a');然后在a节点除了b节点以外的所有子节点上设置data-dnd=false属性值，目的达到了，实现方法好2,

当移动的元素的position为absolute时有问题。

....
//427
else if (element.css('position') === 'absolute') {
            xleft = proxy.offset().left;
            xtop = proxy.offset().top;
}
...
//改成position()获取位置

改名为 draggable

组件code review - 远尘

组件名: dnd
组件维护人: 叁儿
CR人: 远尘

评分:

符合度

目录组织: 5
package.json: 5
README.md 和 docs/: 5
HISTORY.md: 5
.gitignore: 5
examples: 5
正确继承: 5
正确使用别名: 5
测试用例: 2 spm totoro Failed on 3 of 9 browsers，主要是IE兼容性问题
测试覆盖率: 5
正确部署: 4 没publish，没tag
格式: 4 总体不错，有一处注释拼写错误varibale->variable(dnd.js:9)

优秀度

易读性: 2 命名有点晕
API设计: 2 containment命名可以改成container(dnd.js:30), api和变量命名不明确
排版: 5 挺不错的
注释: 2 有些注释是多余的，比如constructor function(dnd.js:22), 有些注释不太直观比如关闭页面Dnd功能,解绑鼠标,esc事件(dnd.js:83)
文档: 3 README里缺少实例的代码片段
可扩展性: 2 没有考虑可能的扩展，比如drop触发之后的自定义回调，可以预留为 executeDrop(callback) {...}
测试用例: 4 如果能够把用例再拆分细化更好了，比如测试边界和方向约束就可以拆成两个用例
准确性: 5 对Base理解很不错，使用准确

总分: 80

貌似如果使用class 一次绑定多个容器拖拽事件是不行的···

不是文档先行么

直接看到实现了，却没有文档。。

drag元素疑问

<div class="dialog">
    <div class="head"></div>
    <div class="conntent"></div>
</div>

像这种，如果是只想head元素上可以拖动整个dialog。这个应该怎么实现。

<div class="dialog" data-dnd=true>
    <div class="head" data-dnd=true></div>
    <div class="conntent" data-dnd=false></div>
</div>

试过这种不行。还有看源码说代理元素proxy是处理完移除代理元素

无法结合css3效果

比如一个dialog使用dnd实现拖动，由于dnd是通过复制一份源节点的方式实现拖动，假如给dialog的show加一个css3d效果，那每次拖动的时候也会触发这个效果，拖动几乎不可用，另外不加css3d的情况下第一次拖动失败概率不低，不知道跟dnd通过复制实现拖动的方式有无关系

dnd 是不是做了禁止冒泡事件的？

drag5 drag2 drag6 drag3 都是什么？

把html里的和js里的对应起来吧？
比如

<div id="drag5" class="drag" data-dnd=true
     data-config='{"drop": "#drop3", "zIndex": 99}'>ss</div>
<br/>
<div id="drop3" class="container">nihao</div>

dnd = new Dnd('#drag5', {drop: '#drop3', proxy: proxy, visible: true,
            revert: true}) ;

现在例子里面貌似ID不对应

要不要合法性检查？

源节点，边界元素，代理元素，目标元素（集合）这些元素之间的合法性要不要检查？若放在setter上处理，那么单独一个属性合法性检查很简单。但是这些相互依赖的合法性不好检查，尤其是初始化时元素设置值顺序不定，所以想去掉这部门相互之间的合法性检查

dnd的支付宝应用场景有哪些？

既然arale主要为支付宝服务，那么dnd也应该主要针对支付宝的应用情景而设计

移动事件进行中无法传递proxy.src，导致移动只能是新建一个img对象来移动，而不是移动效果显示element的src

看了一下源码

README 中属性 dragCursor 误拼为drapCursor

https://github.com/aralejs/dnd#draqcursor-string

样式优化

http://aralejs.org/dnd/

API 的文档样式有点简陋。

添加 gitignore

_site 目录和 sea-modules 不要提交上来。