02_核心概念--08_现代工具箱中的拖放

入门

Ext JS 6.2采用了Ext.dragAPI来为日历包的拖放操作提供了一个跨越开发工具的解决方案。这套API提供了一套类让程序很容易地添加自定义的拖放功能,这些功能涵盖了从最基础的元素操作到复杂的,异步数据传输。Ext.drag API后来被模式化,很大程度地扩展了HTML5的拖放API,并且对于经典和现代工具箱都适用。

概览

 

Ext.drag保持了元素级别API的简易风格,与相应的钩子函数一起合成到你的组件中。它同时也允许与数据相关的操作异步执行。

 

Ext.drag是由两种主要的类组成:Ext.drag.Source和Ext.drag.Target。source(资源)是一种可以被拖动的元素。target是可以从source接受放置元素的元素。这两种类都被附加到Ext.dom.Element中。

这个命名空间也包括了处理元素级别交互的功能。对于组件来说,包裹这些类来提供一个更组件化更友好的接口是非常有价值的。

Ext.drag.Source

拖动源(drag source)代表了一个可以在屏幕上可以被拖动的可移动元素。下面是它的一些主要特性:

约束(Constraining)

约束限制了一个拖动行为发生的可能的位置。约束对于源来说可以使用Ext.drag.Constraint类来处理。一个源的配置(会有一些快捷的配置方式)可以被传入拖动源。这些有用的配置项包括:

限制拖动只能在水平或垂直方向上。

限制拖动在屏幕上的一个特定区域(Ext.util.Region)

限制拖动到哪个父元素上。

通过对齐到表格限制拖动元素的位置。

你可以看到应用到我们的Kitchen Sink示例中的约束的一个示例。

拖放处理

默认情况下,一个在源对象上任何位置的拖动手势将初始化源上的一个拖动。通过使用css选择器可以指定元素的特定部分进行处理。这在以下两种情况下十分有用:

源对象只能被拖动到一个特定的区域,例如,一个窗体的标题栏处。

源对象有很多个重复的元素,这些元素要使用唯一的数据跟踪一个拖动,例如一个dataview。

代理

一个拖动代理是一个显示在屏幕上的,拖动时在有进度条的可视化的表示形式。代理元素(如果声明了)会跟随鼠标的指针。目前,在这个命名空间中,有三种实现方式:

原始的(默认)-源对象元素被移动。

占位符——创建一个新的元素和源元素保留在原处。

没有-没有代理元素。这通常是与源对象一起使用事件来显示拖信息。

 

事件/模板方法

Ext.drag.Target

事件/模板方法

Ext.data.Info

数据描述

综述

键控数据(keyed data)
数据可用性
指定数据
setData方法
Info属性
使用数据
getData方法
Info属性

Source与Target之间的交互

不可用状态

分组

Accept方法

组件集成

结论

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值