本文介绍了ExtJS 6.2中采用的Ext.dragAPI，该API为日历包提供了跨平台的拖放解决方案，并且能够轻松地为应用程序添加自定义拖放功能。Ext.dragAPI不仅扩展了HTML5的拖放API，还适用于经典和现代工具箱。文中详细阐述了Ext.drag.Source和Ext.drag.Target这两个核心类的作用及配置。
入门
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。
代理
一个拖动代理是一个显示在屏幕上的，拖动时在有进度条的可视化的表示形式。代理元素（如果声明了）会跟随鼠标的指针。目前，在这个命名空间中，有三种实现方式：
原始的（默认）-源对象元素被移动。
占位符——创建一个新的元素和源元素保留在原处。
没有-没有代理元素。这通常是与源对象一起使用事件来显示拖信息。
扫一扫
715
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
